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本 书 是 初学 者 自学 Photoshop 移动 UI 设计 的 经 典 教程 。 全 书 从 实用 角度 出 发 ， 
全 面 、 系 统 地 讲解 了 Photoshop 移动 UI 设计 的 方法 ， 基 本 上 涵盖 了 Photoshop 全 
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。 50 多 个 技能 实例 讲解 : 本 书 通过 50 多 个 技能 实例 来 辅 讲 软件 ， 帮 助 读者 在 
实战 演练 中 逐步 掌握 软件 的 核心 技能 ， 与 同类 书 相 比 ， 读 者 可 以 省 去 学 无 用 
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理论 的 时 间 ， 更 能 掌握 超出 同类 书 大 量 的 实用 技能 和 案例 ， 让 学 习 更 高 效 。 

。 260 分 钟 视频 演示 : 本 书 的 软件 操作 实例 ， 全 部 录制 了 带 语音 讲解 的 视频 ， 
时 间 长 度 达 260 分 钟 ( 4 个 多 小 时 ) ， 重 现 书 中 所 有 实例 操作 ， 读 者 可 以 结 
合 书本 观看 视频 演示 ， 让 学 习 变 得 更 加 轻松 。 

。 200 多 款 素材 效果 奉献 : 本 书 赠送 了 114 个 素材 文件 和 87 个 效果 文件 。 其 
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素材 、 系 统 界面 素材 、 系 统 按钮 素材 等 供 读者 使 用 。 

。 800 多 张 图 片 全 程 图 解 : 本 书 采 用 了 800 多 张 图 片 对 软件 技术 、 实 例 进行 讲 
解 和 效果 展示 ， 通 过 这 些 清晰 的 图 片 ， 让 实例 的 内 容 变 得 更 通俗 易 懂 ， 读 者 
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池 习 提示 


什么 是 设计 ? 什么 是 Ul? 在 IT 界 中 经 常会 听 到 各 种 专业 词汇 ， 跨 入 这 个 
行业 ， 才 知道 UI 是 英文 User Interface( 用 户 界面 ) 的 缩写 。 那 么 在 学 习 APP UI 
设计 之 前 , 首先 要 了 解 什么 是 设计 以 及 APP UI 设计 的 一 些 基本 平台 、 界 面 特 点 、 
制作 流程 、 注 意 事 项 等 ， 为 后 面 的 学 习 和 制作 APP UI 设计 打 好 基础 。 


本 章 重 点 导航 


@ 连接 工具 和 人 之 间 的 界面 @ 微软 Windows Phone 系统 
@ 连接 用 户 和 手机 之 间 的 界面 9 手机 界面 

〇 移动 UI 设计 特点 @ 平板 界面 

〇 移动 UI 设计 基础 @ 流程 分 析 

@ 苹果 i0S 系统 @ 注意 事项 

e 谷歌 Android 系统 


f Legin with Facebook 


Sign Up for Freebee 
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1.1 便捷 生活 : 认识 移动 UI 设计 


设计 就 是 把 一 种 计划 、 规 划 、 设 想 通 过 视觉 形式 表达 出 来 的 行为 过 程 。 人 简单 地 说 ， 就 是 
一 种 创造 行为 ， 一 种 解决 问题 的 过 程 ， 其 区 别 于 其 他 艺术 类 的 主要 特征 之 一 就 是 设计 更 具有 
独创 性 。 

移动 UI 设计 的 相关 知识 ， 包 括 UI 设计 、 移 动 UI 的 概念 和 特点 、 手 机 的 界面 特色 以 及 
不 同 移动 UI 的 视觉 效果 等 ， 只 有 认识 并 且 了 解 移 动 UI 设计 的 基本 知识 才能 更 好 地 设计 出 完 


美的 APP 产品 。 
1.1.1 连接 工具 和 人 之 间 的 界面 | 


UI 的 原意 是 用 户 界 面 ， 是 由 英文 User Interface 翻译 而 来 的 ， 概 括 成 一 句 话 就 是 : 人 和 工 
具 之 间 的 界面 。 这 个 界面 实际 上 体现 在 生活 中 的 每 一 个 环节 里 ， 例 如 : 电脑 操作 时 鼠标 与 手 
就 是 这 个 界面 ;吃饭 时 饶 子 和 饭碗 就 是 这 个 界面 ; 在 景区 旅游 时 路 边 的 线路 导 览 图 就 是 这 个 
界面 。 

在 设计 领域 中 ，UI 可 以 分 成 硬件 界面 和 软件 界面 两 大 类 。 本 书 主要 讲述 的 是 软件 界面 ， 
介 于 用 户 与 平板 电脑 、 手 机 之 间 的 一 种 移动 UI, 也 可 以 称 之 为 特殊 的 或 者 是 狭义 的 UI 设计。 

如 图 1-1 所 示 ， 为 热门 的 聊天 社交 类 应 用 “ 微 博 ”APP 的 启动 UI 和 主 菜单 UI。 


关注 热门 
a@ane 
月 圭 
?适时 区 地 ) 风 青 杨 V 人 全 

点 现 关 1 鲜 事 ， 入 a 
//@ 一 个 猫 艳 小 号 : 这 很 重要 
本 ee er 事故 
也 要 彻 查 。 高 空 , 挡 风 玻璃 居然 掉 了 也 算是 史 
et pode 次 意外 ， a 
着 冷静 果断 的 军 转 民 机 长 , 别 光顾 着 斋 锣 打鼓 ， 忽 上 路 了 
事故 缘由 , 不 能 指望 神奇 飞行 员 , 防 患 于 未 然 才 是 最 好 

巴 7 加 2 吓 11 
可 

(Gt 叶 术 社会 名 jo Hak 
被 逮 给 爱情 毁 掉 的 中 国 女 人 
潜 命 如 过 各 钙 麻 在 火 上 类 闫 。 
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图 1-1 “ 微 博 ”APP 的 启动 UI 界面 和 主 菜单 UI 界面 


1.1.2 连接 用 己 和 手机 、 平 板 电 脑 之 间 的 界面 oD| 


APP 就 是 可 以 安装 在 手机 上 的 软件 ， 完 善 原始 系统 的 不 足以 及 实现 个 性 化 。 
APP UI 是 指 移动 APP 的 人 机 交互 、 操 作 逻 辑 、 界 面 美 观 的 整体 设计 。 好 的 APP UI 可 以 


ee 


“和 和 


新 手 入 门 ] : 
和信 1 移动 UI 设计 常识 


提升 产品 的 个 性 和 品位 ， 为 用 户 带 来 舒适 、 简 单 、 自 由 的 使 用 体验 ， 同 时 也 可 以 体现 出 APP 
产品 的 基本 定位 和 特色 。 
如 图 1-2 所 示 ， 为 手机 APP UI 展示 效果 。 


seeen Freebee 二 4 20 AM 


Username 


Password 


图 1-2 手机 APP UI 展示 
如 图 1-3 所 示 ， 为 平板 电脑 中 的 APP UI 展示 效果 。 


图 1-3 平板 电脑 APP UI 展示 


1.1.3 移动 UI 设计 特点 J 
APP UI 就 是 将 各 类 和 手机 应 用 和 UI 设计 结合 起 来 , 使 其 成 为 一 个 整体 , 且 具 备 小 巧 轻便 、 
通信 便捷 的 特点 。 


@ 小 巧 轻便 : APP 可 以 内 骨 到 各 种 智能 手机 中 ， 用 户 可 以 随身 携带 ， 随 时 随地 打开 这 些 


* 


有 
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APP 以 满足 某 些 需 求 。 另 外 ， 移 动 互 联网 的 优势 使 用 户 可 以 通过 各 种 APP 快速 沟通 并 
获得 资讯 。 如 图 1-4 所 示 ， 为 “手机 淘宝 ”的 APP UI， 用 户 通过 手机 即 可 获得 各 种 生 
活 资讯 。 


2G4 加 24% 15:33 区 
|D] (=® 


< 镇 店 之 宝 牛 油 果 GG < 曙 


秋冬 美 鞋 季 的 = 全 国 [1 
显 腿 长 利器 讨 


全 场 包 郎 抢 鲜 价 


店 之 宝 
SIGNATURE PRODUCT 


聚 划 算 。。 天 猫 国际 外 卖 
旅行 


充值 中 心 ”阿里 旅行 领 金币 到 家 分 类 


状 宇 。 本 受 猫 的 坟 上 开 出 来 彼岸 花 ， 主 人 泪 . 
学 蓉 。 EE 厉 害 了 我 的 姐 ， 你 不 敢 想象 她 化 妆 .. 


MEXICAN AVOCAD0 
墨西哥 牛 油 果 


5°C-8°C | 130g-160g z 6 个 装 
鲁莽 a 竺 机 


¥49 


图 1-4 “手机 淘宝 ”的 APP UI 
e@ 通信 便捷 : 移动 APP 使 人 们 沟通 变 得 更 加 方便 ， 可 以 跨 通信 运营 商 、 跨 操作 系统 平台 


通过 无 线 网 络 快速 发 送 免 费 语音 短信 、 视 频 . 图 片 和 文字 。 如 图 1-5 所 示 , 为 微 信 APP 
的 UI 界 面 ， 用 户 通过 “ 摇 一 摇 ”“ 搜 索 号 码 ”“ 附 近 的 人 ”、 扫 二 维 码 方式 添加 好 
友和 关注 公众 平台 ， 同 时 可 以 将 内 容 分 享 给 好 友 或 朋友 圈 。 


所 © 3204 25% 15:40 5 P22GA 25% 15:40 
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请 注意 


通过 摇 一 摇 ， 你 可 以 找到 这 个 世界 
上 同样 也 在 播 手机 的 朋友 。 


不 要 轻信 摇 到 的 陌生 人 ， 加 为 好 友 
时 要 谨慎 核实 对 方 身份 。 如 果 对 方 


发 布 的 信息 对 你 造成 了 困扰 ， 请 立 
即 向 我 们 投诉 。 


我 知道 了 


图 1-5 “ 微 信 ”APP 的 “ 播 一 摇 ” 相 关 界 面 


ee 移动 UI 设计 常识 导 


1.1.4 移动 UI 设计 基础 JU 
随 着 科技 的 发 展 ， 现 在 智能 手机 的 功能 越 来 越 多 ， 而 且 越 来 越 强 大 ， 甚 至 可 以 和 电脑 相 
妮 美 。 


要 设计 出 优秀 的 APP UJ， rie 熟悉 智能 手机 的 界面 构造 。 手 机 界面 被 分 为 几 个 标准 
的 信息 区 域 : 状态 栏 、 标 题 区 、 功 能 操作 区 、 导 航 栏 等 。 
如 图 1-6 所 示 ， 为 “ 微 信 ”APP 的 UI 构成。 


标题 区 我 关注 的 于 


OO 关注 的 好 友 
rly| 的 自然 世界 
自然 界 的 “维基 百科 ”| 


ME 科普 中 国 
各 吻 中国 科 协 科普 工作 官方 生平 台 


活 粒 科学 
《财经 》 桨 志 旗 下 的 健康 小 组 , 关注 健康 政策 、 产 业 
发 展 。 

(起 和 和 日 历 时 学 
免 邳 、 龙 猫 、 几 维 乌 , 总 有 一 就 毛 ; 铃 兰 
桔梗 、 四 照 花 di ee 历 娘 .。 


导航 栏 z / | 人 
1-6 ”手机 界面 构成 的 基本 单位 

@ 状态 栏 : 用 于 显示 手机 目前 运行 状态 及 事件 的 区 域 ， 主 要 包括 应 用 通知 、 手 机 状态 、 
网 络 信和 号 强度 、 运 和 营 商 名 称 、 电 池 电 量 、 未 处 理事 件 和 数量 以 及 时 间 等 要 素 。 在 APP 
UI 设计 过 程 中 ， 状 态 栏 并 不 是 必须 存在 的 元 素 ， 用 户 可 依照 交互 需求 进行 取舍 。 

e@ 标题 区 : 主要 用 于 放置 APP 的 LOGO、 名 称 、 版 本 以 及 相关 图 文 信息 。 

e 功能 操作 区 : APP 应 用 的 核心 部 分 ， 也 是 手机 版 面 上 面积 最 大 的 区 域 ， 通 稼 包含 
有 列表 (list) 、 焦 点 (highlight) 、 滚 动 条 (scroalbar) 、 图 标 (icon) 等 多 种 不 同 元 
素 。 在 各 个 APP ee 不 同 层 级 的 UI 包 含 的 元 素 可 以 相同 也 可 以 不 同 ， 用 户 可 以 根 
据 实 际 情 况 进 行 合理 搭配 运用 ， 如 图 1-7 所 示 。 

e@ 导航 栏 : 也 称 之 为 公共 导航 区 或 软 键盘 区 域 ， 它 是 对 APP 的 主要 操作 进行 宏观 操控 的 
区 域 ， 可 以 出 现在 该 APP 的 任何 界面 中 ， 方 便 用 户 进行 切换 操作 。 

APP 运行 在 手机 操作 系统 的 软件 环境 中 ， 其 UI 的 设计 应 该 是 基于 这 个 应 用 平台 的 整体 

风格 ， 这 样 有 利于 产品 外 观 的 整合 。 
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二。 Q。 搜索 知 平 内 容 <: 


9 已 O © & 冰 贡 语音 启 人 需要 知道 


时 间 : 2016 年 12 月 10 日 21:00 
Np 知 平 . 训 蔬 会 
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图 1-7 同一 个 APP 中 不 同 层级 的 UI 
手机 界面 效果 的 规范 性 包括 以 下 两 个 方面 ， 如 图 1-8 所 示 。 


界面 的 色彩 及 风格 与 系统 界面 APP UI 设计 在 操作 流程 的 安 
统一 ， 即 APP UI 的 总 体 色彩 排 上 ,必须 遵循 系统 的 规 沁 性 ， 
应 接近 或 类 似 系统 界面 的 总 体 向 化 用 户 操 作 访 程 。 
色调 。 


1-8 手机 界面 效果 的 规范 性 内 容 


手机 界面 的 整体 性 和 一 致 性 要 基于 手机 系统 视觉 效果 的 和 谐 统 一 进行 考虑 ， 而 手机 界面 
效果 个 性 化 是 基于 软件 本 身 的 特征 和 用 途 进行 考虑 的 。 界 面 效 果 的 个 性 化 包括 以 下 几 个 方面 ， 
如 图 1-9 所 示 。 
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个 性 化 的 界面 框架 


1-9 手机 界面 效果 的 个 性 化 


1.2 主流 系统 : 深入 了 解 UI 操作 平台 


在 移动 互联 网 时 代 ，Android、1O0S、Windows 等 智能 设备 操作 系统 成 为 用 户 应 用 APP 的 
基本 入 口 ， 如 图 1-10 所 示 。 


APP 应 用 


1-10 手机 操作 系统 的 地 位 
因此 ， 用 户 除 了 要 了 解 APP UI 设计 的 基本 思想 外 ， 还 必须 认识 Androld、10S、Windows 
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移动 设备 的 3 大 主流 系统 ， 并 熟悉 移动 设备 的 主流 平台 和 设计 的 基本 原则 。 


1.2.1 谷歌 Android 系统 OD 


Android 是 由 Google 基于 Linux 开发 的 一 款 移动 操作 系统 。 
在 移动 设备 的 操作 系统 领域 ，iOS 和 Android 系统 的 竞争 十 分 激烈 ， 都 希望 占据 更 大 的 
份额 。 目 前 ， 由 于 市 面 上 存在 众多 的 Android 系统 OEM 厂商 ， 因 此 Google 的 Android 操作 


系统 处 在 移动 系统 的 领先 位 置 ， 如 图 1-11 所 示 。 


全 球 智 能 手机 操作 系统 市 场 
上 所 占 份额 约 为 4/5 


预计 2019 年 Android 系统 将 


占据 全 球 82.6% 的 移动 系统 
市 场 份额 


图 1-11 Android 操作 系统 占据 了 大 部 分 的 移动 设备 市 场 份额 


Android 操作 系统 的 APP UI 设计 基本 原则 就 是 拥有 实用 的 界面 ， 设 计 者 可 以 设计 动画 或 
者 即时 的 音效 ， 带 给 用 户 一 种 更 加 愉悦 的 体验 ， 如 图 1-12 所 示 。 


Qe View vs, UNIQUe visitors 


地 


图 1-12 APP UI 设计 中 的 动画 效果 
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另外 ，Android 用 户 可 以 直接 触 屏 操作 APP 中 的 对 象 ， 这 样 有 助 于 降低 用 户 完成 任务 时 
的 认 知 难度 ， 进 一 步 提高 用 户 对 APP 的 满意 度 。 例 如 ， 在 “最 美 天 气 ”APP 的 UI 界面 中 ， 
用 户 可 以 通过 请 动 屏幕 的 方式 ， 查 看 更 多 的 天 气 资讯 ， 如 图 1-13 所 示 。 


1-13 “最 美 天 气 ” 的 APP UI 
在 设计 Android 操作 系统 的 APP UI 时 ， 设 计 者 应 尽量 使 用 图 片 来 表达 信息 ， 图 片 比 文字 
更 容易 理解 ， 而 且 更 加 吸引 用 户 的 注意 力 。 例 如 ， 在 “手机 淘宝 ”APP 的 UI 中 ， 采 用 了 大 
量 直观 的 图 标 菜 单 和 图 片 展示 列表 ， 如 图 1-14 所 示 。 
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图 1-14 “手机 淘宝 ”的 APP UI 
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1.2.2 苹果 iOS 系统 | 


IOS 是 由 苹果 公司 开发 的 一 种 采用 类 UNIX 内 核 的 移动 操作 系统 ， 最 初 的 设计 是 给 
iPhone 使 用 的 ， 后 来 陆续 套用 到 iPod Touch、iPad 以 及 Apple TV 等 产品 上 。 
@ iPod Touch: 一 款 由 苹果 公司 推出 的 便携 式 移动 产品 。 与 Phone 相 比 ,造型 更 加 轻 湾 ， 
彻底 改变 了 人 们 的 娱乐 方式 ， 如 图 1-15 所 示 。 


图 1-15 iPod Touch 


@ iPad: 苹果 公司 发 布 的 平板 电脑 系列 , 能 够 提供 训 览 网 站 、 收 发 电子 邮件 、 观 看 电子 书 、 
播放 音频 或 视频 、 玩 游戏 等 功能 ， 如 图 1-16 所 示 。 


图 1-16 iPad 产品 


e@ Apple TV: 由 苹果 公司 设计 、 营 销 和 销售 的 数字 多 媒体 播放 机 。 

乔布斯 在 首次 展示 iPhone 手机 时 说 过 : “我 们 今天 将 创造 历史 。1984 年 Macintosh 改变 
了 计算 机 ，2001 年 iPod 改变 了 音乐 产业 ，2007 年 iPhone 要 改变 通信 产业 。” 

如 今 ， 乔 布 斯 的 预言 确实 实现 了 ， 基 于 10S 系统 的 Phone 将 智能 手机 推 向 了 新 的 舞台 ， 
引发 了 移动 互联 网 时 代 的 信息 爆发 ， 改 变 了 互联 网 行业 的 格局 ， 如 图 1-17 所 示 。 
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iPhone 将 报纸 杂志 、 书 籍 、 

指南 针 、 电 视 电 影 、 游 戏 音 改变 了 人 们 的 信息 
乐 等 生活 中 的 方方面面 都 装 获取 和 处 理 方式 
进 了 人 们 的 “口袋 ”里 


开创 了 一 个 全 新 的 
智能 手机 时 代 


图 1-17 iPhone 对 互联 网 行业 的 改变 
对 于 UI 设计 者 而 言 ，1OS 操作 系统 带 来 了 更 多 的 开发 平台 。 下 面 简 单 分 析 10S 操作 系统 
APP 应 用 的 UI 设 计 基 本 原则 。 
e@ 便捷 的 操作 : 1OS 操作 系统 中 的 APP 应 用 通常 具有 圆润 的 轮廓 和 程式 化 的 梯度 ， 操 作 
非常 便捷 ， 如 图 1-18 所 示 。 
e 清晰 明朗 的 结构 ， 便 捷 的 导航 控制 ， 在 设计 APP UI 时， 应 尽量 将 所 有 的 导航 操作 都 
安排 在 一 个 分 层 格式 中 ， 使 用 户 可 以 随时 看 到 当前 的 位 置 ， 如 图 1-19 所 示 。 
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图 1-18 iPhone 的 操作 十 分 便捷 图 1-19 ”便捷 的 导航 控制 
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专家 指点 ) 


设计 者 应 该 在 APP 界面 中 提供 当前 界面 标记 和 后 退 按钮 。 

@ 当前 界面 标记 : 用 户 可 以 及 时 了 解 自己 所 处 的 位 置 ， 清 楚 每 一 个 界面 的 主要 功能 
和 特点 。 

@ 后 退 按钮 : 可 以 快速 退出 当前 界面 返回 APP 主 界面 。 


另外 ， 华 果 公 司 还 推出 了 车 载 10S 系统 ， 用 户 可 以 将 10S 设备 与 车 辆 无 颖 结合 ， 使 用 汽 
车 的 内 置 显示 屏 和 控制 键 ， 或 Siri 免 视 功 能 与 苹果 移动 设备 实现 互动 ， 如 图 1-20 所 示 。 


\ 到 月 


Anrufen 


Fahren Musik 


1-20 车载 iOS 系统 界面 


1.2.3 微软 Windows Phone 系统 WU 


Windows Phone(〈 人 简称 为 WP) 是 微软 于 2010 年 10 月 21 日 正式 发 布 的 一 款 手 机 操作 系统 ， 
如 图 1-21 所 示 。 


图 1-21 Windows Phone 系统 
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Metro 是 微软 在 Windows Phone 中 正式 引入 的 一 种 界面 设计 语言 ， 其 设计 风格 优雅 ， 
可 以 令 用 户 获 取 一 个 美观 、 快 捷 流 畅 的 界面 和 大 量 可 供 使 用 的 新 应 用 程序 。Metro 为 用 户 
带 来 了 出 色 的 触 挖 体验 ， 同 时 又 可 以 使 用 息 标 、 触 控 板 和 键盘 工作 。 


Windows Phone 操作 系统 采用 Metro UI 的 设计 ， 并 在 系统 中 整合 了 Xbox Live 游戏 、 
Xbox Music 音乐 与 独特 的 视频 体验 ， 如 图 1-22 所 示 。 
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图 1-22 ”Windows Phone 8 系统 


201$ 年 3 月 14 日 ， 微 软 正 式 宣 布 以 Windows 10 Mobile 作为 新 一 代 Windows 10 手机 
版 操作 系统 的 正式 名 称 ， 如 图 1-23 所 示 。Windows Phone 8.1 则 可 以 免费 升级 到 Windows 10 
Mobile 版 。 


Windows10 


Mobile 


图 1-23 Windows 10 Mobile 系统 
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Windows 10 Mobile 操作 系统 的 界面 整洁 干净 ， 其 独特 的 内 容 替 换 布局 的 设计 理念 更 是 让 
用 户 回 到 了 内 容 本 映 ， 其 设计 原则 应 该 是 “光滑 、 快 、 现 代 ”。 

Windows 10 Mobile 操作 系统 的 Metro UI 是 一 种 界面 展示 技术 ， 和 苹果 的 10S、 合 歌 的 
Android 界面 最 大 的 区 别 在 于 : 后 两 种 都 是 以 应 用 为 主要 呈现 对 象 ， 而 Metro 界面 强调 的 是 信 
息 本 身 ， 而 不 是 元 余 的 界面 元 素 。 

另外 ，Metro UI 的 主要 特点 是 完全 平面 化 、 设 计 简 约 ， 没 有 像 10S 一 样 采用 渐变 、 浮 雕 
等 质感 效 末 ， 这 样 可 以 营造 出 一 种 身 临 其 境 的 视觉 效果 ， 如 图 1-24 所 示 。 
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图 1-24 Windows 10 Mobile 系统 的 平板 模式 


Windows 操作 系统 不 断 挺进 移动 终端 市 场 ， 试 图 打破 人 们 与 信息 和 APP 之 间 的 隔 疼 ， 所 
供 优秀 的 “ 端 到 端 ”体验 ,适用 于 人 们 的 工作 、 生 活 和 娱乐 的 方方面面 。 


1.3 熟悉 界面 了解 手 机 与 平板 电脑 界面 


APP UI 是 移动 设备 的 操作 系统 、 硬 件 与 用 户 进 行人 机 交互 的 窗口 ， 设 计 和 界面 时 必须 基于 
手机 的 物理 特性 和 软件 的 应 用 特性 进行 合理 的 设计 ， 界 面 设计 者 首先 应 对 移动 设备 的 第 用 界 
面 有 所 了 解 。 


1.3.1 手机 界面 OD 


在 智能 手机 中 ， 通 过 结合 “无 线 网 络 +APP 应 用 ”可 以 实现 很 多 意 想不到 的 功能 ， 这 些 
都 为 智能 手机 的 流行 和 APP UI 设计 的 发 展商 定 了 一 定 的 基础 。 
常用 的 手机 界面 主要 分 为 以 下 3 类 。 
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1. Android 手机 界面 
Android 操作 系统 的 手机 品类 繁多 ， 其 屏幕 尺寸 和 分 辨 率 却 有 着 很 大 的 差异 。 表 1-1 所 示 
为 Android 智能 手机 第 用 的 屏幕 尺寸 和 分 辩 率 。 
表 1-1 Android 智能 手机 常用 的 屏幕 尺寸 和 分 辨 率 


dl 


屏幕 尺寸 分 辨 率 
2.8 英寸 640 x 480 (VGA) 
3.2 英寸 480 x 320 (HVGA) 
3.3 英 十 854x480 (WVGA) 
480 x 320 (HVGA) 
800x 480 (WVGA) 
I 854x 480 (WVGA) 
960 x 640 (DVGA) 
800 x 480 (WVGA) 
3.7 英寸 800 x 480 (WVGA) 
960 x 540 (qHD) 
800 x 480 (WVGA) 
2 854x480 (WVGA) 
960 x 540 (qHD) 
1136x 640 (HD) 
4.2 英寸 960 x 540 (qHD) 
800 x 480 (WVGA) 
人 960x 640 (qHD) 
960 x 540 (qHD) 
1280 x 720 (HD) 
960 x 540 (qHD) 
4.5 英寸 1280 x 720 (HD) 
1920 x 1080 (FHD) 
4.7 英寸 1280 x 720 (HD) 
4.8 英寸 1280 x 720 (HD) 
480 x 800 (WVGA) 
1024 x 768 (XGA) 
OR 1280 x 720 (HD) 
1920 x 1080 (FHD) 
ce 1280 x 800 (WXGA) 
960 x 540 (qHD) 
1280 x 720 (HD) 
Sp 2560 x 1600 
7.0 英寸 1280 x 800 (WXGA) 
1024 x 768 (XGA) 
wh 2048 x 1536 
1200 x 600 
Wl 2560 x 1600 


I 
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例如 , 华为 手机 就 是 国内 Android 系统 手机 的 代表 。 其 中 , 华为 P20 的 主屏 矿 寸 为 5.8 英寸 ， 
主屏 分 辨 率 为 2244 x 1080 像素 ， 搭 载 马 麟 970 处 理 器 ， 提 供 6GB 内 存 和 128GB 存储 空间 ， 
3400 毫 安 时 电池 以 及 2400 万 像素 加 AI 防 拌 相 机 ， 如 图 1-25 所 示 。 


图 1-25 化 为 P10 


2. 苹果 手机 界面 

以 iPhone 6s Plus 为 例 ， 其 外 观 颜 色 有 金色 、 银 色 、 深 空 灰 、 玫 现金 等 ， 屏 幕 采 用 高 强度 
的 Ion-X 玻璃 ,支持 4 视频 摄 录 。 

i1Phone 6s Plus 的 主屏 分 辨 率 为 1920 x 1080 像素 ， 屏 幕 像素 密度 为 401ppl。iPhone 6s Plus 
在 屏幕 上 的 最 大 升级 是 加 入 了 Force Touch 压力 感应 触 控 〈 即 3D Touch 技术 ) ， 使 触 屏 手机 
的 操作 性 进一步 扩展 ， 如 图 1-26 所 示 。 


本 


图 1-26 iPhone 6s Plus 中 的 3D Touch 技术 
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3D Touch 是 一 种 屏幕 压 感 技术 ， 通 过 内 置 硬件 和 软件 感受 用 户 手指 的 力度 ， 来 实现 
不 同 层 次 的 操作 。 用 力 按 一 个 APP 图 标 会 弹出 一 层 半 透明 菜单 ， 里 面包 含 了 该 APP 应 用 
下 的 一 些 快 捷 操 作 。 


3. 微软 手机 界面 


微软 系统 的 手机 除了 采用 特 立 独行 的 Metro 用 户 界面 ， 并 搭配 动态 磁 贴 (Live Tiles) 信 


息 展示 及 告知 系统 等 特色 外 ， 男 一 大 特色 就 是 具有 无 颖 链接 各 类 应 用 的 “中 心 ” (Hub) ， 
如 图 1-27 所 示 。 


图 1-27 微软 系统 的 “中 心 ” (Hub) 特色 


1.3.2 平板 电脑 界面 JU 


平板 电脑 (Iablet Personal Computer， 人 向 称 Tablet PC、Flat PC、Tablet、Slates) 又 称 为 便 


携 式 电脑 ,是 一 种 体积 较 小 、 方 便携 带 的 微型 电脑 ， 以 触摸 屏 作 为 基本 的 输入 设备 ， 如 图 1-28 
所 示 。 


图 1-28 平板 电脑 
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平板 电脑 主要 通过 触摸 屏 进 行 操作 , 不 需要 主机 、 鼠标 、 键盘 等 配件 , 使 用 起 来 非常 方便 。 
作为 一 种 小 型 、 便 捷 的 微型 电脑 ， 平板 电脑 受到 了 越 来 越 多 用 户 的 喜爱 ， 形 成 了 一 种 新 的 产 
业 格 局 。 

如 今 ， 人 苹果 iPad 在 平板 电脑 市 场 中 占据 了 主导 地 位 ， 另 外 一 部 分 市 场 就 是 Android 平板 
电脑 的 “天 下 了。 例如， 华为、 联想、 小 米 、 三 星 、 戴 尔 、HIC 等 厂家 均 推出 了 Android 
平板 电脑 。 图 1-29 所 示 为 华为 Ms Pro 平板 电脑 。 


。 TREE 华为 平板 M5 Pro 核 心 参数 
| EE | CPU 到 号 海 忌 倒 殖 960 
4 全 CPU 核 至 八 核 + 仙 吞 核 i6 
[| + 屏 且 尺寸 10 .8 机 二 
人 屏 芋 忆 形 1600 万 色 
国 * \ 分 辩 率 2560x1600 
| peAiena 运行 内 存 ( RAM ) 4GB (备注 : 可 使 用 的 内 存 穴 量 小 于 此 值 ， 因 为 手机 软件 占用 了 部 分 空间 ) 
A a 团 存储 容量 (ROM ) 。 ”64GB (备注 ; 可 使 用 的 存 能 容量 小 于 此 值 ,因为 手机 软件 占用 了 吕 分 空间 ) 
扩展 支持 microsD 
é 可 扩 必 容量 256GB 
电池 容量 7500mAh ( 典型 值 ) 
| 主 摄 稳 浆 1300 万 像素 
副 摄 沼 头 800 万 像素 


1-29 ”化 为 M5 Pro 平板 电脑 


微软 不 甘 落 后 ， 在 2015 年 的 世界 移动 通信 大 会 (MWC 2015) 上 ， 首 次 展示 了 
Windows 10 统一 平台 战略 的 “代表 作 ”: Windows 10 通用 应 用 (Windows10 Universal 
App， 简 称 UWP) 平台 ， 如 图 1-30 所 示 。 


车 Windows 10 


1-30 ”Windows 10 通用 应 用 平台 


通过 UWP 平台， 使 得 任何 一 款 应 用 都 可 以 在 所 有 安装 了 Windows 10 操作 系统 的 
设备 上 运行 ， 如 平板 电脑 、 智 能 手机 、 笔 记 本 电脑 、 台 式 机 、Xbox 家 用 电视 游戏 机 、 
HoloLens 3D 全 息 眼 镜 、Surface Hub 巨 屏 触 控 产 品 以 及 Raspberry Pi 2 迷你 电脑 等 ， 它 们 
之 间 的 连接 不 再 有 界限 。 


新 手 入 门 : 肠 
二 移动 UI 设计 常识 


1.3.3 流程 分 析 JU 


APP UI 设计 的 基本 工作 流程 包括 分 析 、 设 计 、 调 研 、 改 进 与 验证 4 个 阶段 ， 具体 流程 如 
图 1-31 所 示 。 


需求 分 析 、 用 户 场 景 模拟 、 阮 品 分 析 等 


采用 面 癌 场 景 、 面 癌 事 件 和 和 面 问 对 象 的 设计 
方法 


邀请 各 方 人 士 对 几 套 设计 方案 进行 评定 ， 优 
胜 务 汰 ， 选 取 用 户 体 验 最 好 的 方案 


对 APP 的 界面 和 功能 进行 评估 ， 以 确定 其 是 
否 满足 需求 ， 并 对 不 足 之 处 进行 改进 


图 1-31 APP UI 的 设计 流程 


1.3.4 ”注意 事项 JU 


在 设计 APP UI 的 过 程 中 ， 有 很 多 需要 注意 的 问题 ， 如 色彩 、 图 案 等 。 
1. 色彩 的 使 用 要 辟 
对 于 APP UI 设计 者 来 说 ， 色 彩 是 最 重要 的 因素 ， 不 同 颜色 代表 不 同 的 情绪 ， 因 此 对 色 
彩 的 使 用 应 该 和 APP 以 及 主题 相 契 合 。 如 图 1-32 所 示 ， 该 APP 的 导航 栏 通过 运用 不 同 颜色 
的 按钮 来 代表 其 激活 状态 ， 使 用 户 快 速 获得 自己 所 处 的 位 置 。 


图 1-32 APP 导航 栏 的 色彩 设计 


19 -一 


国 


Photoshop 一 一 二 Ee 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


在 APP UI 的 制作 过 程 中 ,根据 色彩 的 特性 ， 可 以 通过 调整 其 色相 、 明 度 以 及 纯度 之 间 
的 对 比 关 系 ， 或 通过 各 色彩 间 面 积 调和 搭配 出 色彩 斑 泣 、 变 化 无 穷 的 APP UI 画面 效果 。 

总 之 ， 让 自己 的 APP UI 更 好 看 一 些 、 更 漂亮 一 些 ， 这 样 就 会 在 视觉 上 吸引 用 户 ， 给 
APP 带 来 更 多 的 下 载 量 。 

2. 图 案 的 使 用 要 辟 

在 APP UI 的 图 和 案 设计 过 程 中 , 每 一 个 页 面 不 要 放 入 过 多 的 内 容 , 这 样 会 让 用 户 难以 理解 ， 
操作 也 会 显得 更 加 烦琐 。 

例如 ， 可 以 使 用 一 些 半 透明 效果 的 图 案 来 作为 播放 器 的 控制 栏 ， 使 用 户 在 操作 时 也 可 以 
看 到 视频 播放 画面 ， 如 图 1-33 所 示 。 


强制 使 用 16:9 


图 1-33 ” 半 透 明 的 播放 器 控制 栏 


学 习 提 示 


在 设计 移动 UI 时 , 布局 主要 是 指 对 界面 中 的 文字 、 图 形 或 按钮 等 进行 排版 ， 
使 各 类 信息 更 加 有 条 理 、 有 次 序 、 整 齐 ， 帮 助 用 户 快速 找到 自己 想 要 的 信息 ， 
提升 产品 的 交互 效率 和 信息 的 传递 效率 。 


本 章 重 点 导航 


坚 癌 排列 布局 〇 点 聚 式 布局 

@ 横 回 排列 布局 @ 转盘 式 布 局 

@ 九宫 格 排 列 布局 @ 导 般 栏 置 奈 式 布局 

@ 弹出 框 式 布局 @ 磁 贴 状态 式 布局 

@ 热门 标签 布局 @ 超级 菜单 式 布 局 

@ 侧 边栏 式 布局 @ 导航 栏 置顶 式 布 局 

@ 陈列 馆 式 布局 @ 界面 约 灯 片 式 布局 

@ 分 段 菜单 式 布 局 @ 图 表 信 息 布 局 设计 方法 


@ TYTSEZEFTT ETYT 
《手机 摄影 构图 大 全 : 


热门 
;| 手机 摄影 构图 大 全 本 
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目 册 不 
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2.1 初级 布局 : 解析 移动 U1 纵 模 布局 


软件 界面 的 设计 师 除 了 视 沉 本 身 以 外 ， 对 于 设计 是 否 可 以 实现 、 大 概 以 何 种 方式 实现 、 
规范 可 否 被 理解 并 且 是 否 可 执行 、 设 计 实 现 的 性 价 比 与 时 间 比 等 维度 都 应 有 相当 深 的 认识 。 
本 小 节 将 跟 读 者 交流 关于 页 面向 单 布 局 的 一 些 相 关 知 识 ， 是 初级 阶段 的 UI 设计 方法 。 


2.1.1 ” 竖 向 排列 布局 | 


由 于 手机 屏幕 大 小 有 限 ， 因 此 大 部 分 的 手机 屏幕 都 采用 竖 屏 列表 显示 ， 这 样 可 以 在 有 限 
的 屏幕 上 显示 更 多 的 内 容 。 

在 竖 排 列表 布局 中 ， 第 用 来 展示 功能 目录 、 产 品类 别 等 并 列 元 素 ， 列 表 长 度 可 以 向 下 无 
限 延 伸 ， 用 户 通过 上 下 请 动 屏 幕 可 以 查看 更 多 内 容 ， 图 2-1 所 示 为 竖 排 列表 布局 。 


手机 摄影 构图 大 全 
微 信号 : goutudaquan 
1000 多 种 构图 技 ; 0 多 种 场景 
品 构图 拍 法 +100 张 作 品 展示 前 
作品 与 大 片 的 距离 一 种 构图 
法 。 最 人 全面、 最; 最 生动 的 摄影 
图 公众 只 要 收藏 了 ， 你 也 能 成 为 摄 
影 大 师 ! 
附近 的 人 帐号 主体 ”入 长 沙市 飞龙 文化 传播 有 限 公 司 》 
接收 消息 a 
查看 历史 消息 


重阳 登山 知 秋 意 人 


处 Cr 2 投诉 
坚 排列 表 布 局 


2.1.2 横向 排列 布局 | 


由 于 智能 手机 的 屏幕 分 辨 率 有 限 ， 无 法 完全 显示 电脑 中 各 种 软件 的 工具 栏 ， 因 此 很 多 移 
动 应 用 在 工具 栏 区 域 采 用 横 排 方块 的 布局 方式 。 

在 元 素数 量 较 少 的 移动 UI 中 ， 特 别 适合 采用 横 排 方块 来 进行 布局 ， 但 这 种 方式 需要 用 
户 进 行 主动 探索 ， 体 验 感 一 般 ， 因 此 如 果 要 展示 更 多 的 内 容 ， 最 好 采用 竖 排 列表 。 

横 排 方块 布局 主要 是 横向 展示 各 种 并 列 元 素 ， 用 户 可 以 左右 滑动 手机 屏幕 或 点 击 左右 入 
头 按钮 来 查看 更 多 内 容 。 例如, 大 部 分 的 新 媒体 平台 中 的 “图 片 ”版 块 就 是 采用 横 排 方块 布局 ， 
如 图 2-2 所 示 ， 为 模 排 方块 布局 。 
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大 连 出 现 " 灾 光 海 "景观 画面 唯美 


2-2 ，” 横 排 方块 布局 


2.1.3 九宫 格 排列 布局 | 


九宫 格 最 基本 的 表现 其 实 就 是 一 个 3 行 3 列 的 表格 。 目 前 ， 很 多 UI 采用 了 九宫 格 的 变 
体 布局 方式 。 图 2-3 所 示 为 九宫 格 布局 风格 。 
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2.2 ”高 级 布局 : 解析 移动 U1 特殊 布局 
布局 对 UI 设计 有 着 很 大 的 影响 ， 本 小 节 将 为 读者 讲述 一 些 界面 特殊 的 布局 方法 。 


2.2.1 弹出 框 式 布局 JU 


在 移动 UI 中 ， 对 话 框 通 第 是 作为 一 种 次 要 窗口 ， 可 以 出 现在 界面 的 项 部、 中 间或 底部 
等 位 置 ， 其 中 包含 了 各 种 按钮 和 选项 ， 通 过 它们 可 以 完成 特定 的 命令 或 任务 ， 是 一 种 第 用 的 
布局 设计 方式 。 

弹出 框 中 可 以 隐 刀 很 多 内 容 ， 在 用 户 需 要 的 时 候 可 以 单 击 相应 按钮 将 其 显示 出 来 ， 主 要 
作用 是 节省 手机 的 屏幕 空间 。 在 Android 系统 的 移动 设备 中 ， 很 多 菜单 、 单 选 框 、 多 选 框 、 
对 话 框 等 都 是 采用 弹出 框 的 布局 方式 。 图 2-4 所 示 为 弹出 框 式 布 局 。 


¥ 298.00 


微 信 钱包 


取消 。 立即 购买 


2-4 弹出 框 式 布 局 


2.2.2 热门 标签 布局 JU 


在 移动 UI 设计 中 ， 搜 索 界面 和 分 类 界面 通常 会 采用 热门 标签 的 布局 方式 ， 这 种 布局 
让 页 面 更 语义 化 ， 使 各 种 移动 设备 能 够 更 加 完美 地 展示 软件 界面 。 图 2-5 所 示 为 热门 标签 
布局 。 
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X 全 部 分 类 
所 搜索 文章 、 专 题 、 用 户 、 文集 Q 
器 热门 专题 > 器 类 型 小 说 
内 热门 搜索 〇 换 一 基 十 看 儿童 文学 童话 悬疑 
- 坝 理 犯罪 惊悚 巩 饰 
三 生 二 世 小 程序 
我 白 之 旅 
灵异 志 怪 历史 科幻 
奇幻 魔幻 魔幻 现实 主义 
玄幻 武侠 宫 迁 军事 
体育 竞技 校园 十 县 情 奔 
言情 家 庭 都 市 乡土 
车 职场 商战 官场 
WP 成 村 PR 


图 2-5 热门 标签 布局 


2.2.3 ” 侧 边 栏 式 布 局 | 


侧 边 栏 式 布局 又 可 以 称 为 抽 屠 式 布 局 ， 它 主要 是 将 功能 菜单 放置 在 APP 的 两 侧 (通常 是 
左 侧 )。 在 操作 时 ， 用 户 就 像 打开 一 个 抽 屠 一 样 ， 将 界面 从 APP 的 侧 边栏 中 抽出 来 ， 拉 到 手 
机 屏幕 中 。 例 如 ， 手 机 QQ 的 功能 菜单 就 是 采用 的 抽 展 式 布局 。 图 2-6 所 示 为 抽 展 式 布局 。 
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图 2-6 抽 居 式 布 局 
抽 屠 去 布局 最 显著 的 优点 就 是 可 以 通过 纵 同 排列 切换 项 解决 栏目 个 数 的 问题 ， 但 是 ， 这 
些 “ 抽 展 ” 中 的 栏目 却 不 能 和 主体 内 容 同时 出 现在 屏幕 上 。 
抽 屠 式 布局 分 为 以 下 两 种 模式 。 
(1) 列表 式 布 局 : 例如 ， 在 “ 易 企 秀 ” 的 分 类 界面 中 ， 就 是 采用 左 侧 抽 屠 列表 式 布局 模式 ， 
用 户 可 以 在 左 侧 的 列表 中 选择 HS 种 类 ， 在 右 侧 的 列表 中 查看 H5 模板 ， 如 图 2-7 所 示 。 
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图 2-7 列表 式 布局 模式 
(2) 图 标 卡 片 式 布局 : 例如 , 在 简 书 的 “人 简 书 会 员 ” 页 面 中 , 采用 的 就 是 图 标 卡 片 式 布局 模 
式 , 用 户 在 “ 简 书 会 员 ” 里 选择 相应 的 会 员 后 , 即 可 点 击 “ 开 通 ” 按钮 购买 相应 的 会 员 , 如 图 2-8 
所 未。 


X 简 书 会 员 X 简 书 会 员 
© Kingmaipi ME © Kingmaipi wo 
全 未 开 送 晓 当前 来 开通 蛾 
会 员 (VIP) jy 尊 享 会 员 (SVIP) 会 员 (VIP) jy 苯 享 会 员 (SVIP) 
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图 2-8 图 标 卡 片 式 布局 


2.2.4 ”陈列 馆 式 布局 | 


陈列 馆 式 布局 又 称 为 图 式 布 局 ， 主 要 是 采用 “图 片 + 文 字 ” 的 形式 来 排列 APP 中 的 各 种 
元 素 。 陈 列 馆 式 布局 可 以 很 好 地 展现 实时 内 容 。 例 如 ， 很 多 新 闻 、 照 片 以 及 餐厅 APP 等 界面 
都 采用 了 这 种 布局 方法 。 

陈列 馆 式 布 局 分 为 以 下 两 种 模式 。 
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二 


(1) 网 格 布局 模式 : 大 量 的 手机 浏览 器 采用 网 格 布局 ， 虽 然 视 沉 效 果 比 较 普 通 ， 但 其 结构 
清晰 、 功 能 分 布 十 分 明朗 ， 而 且 设计 者 也 可 以 通过 巧妙 地 处 理 网 格 来 吸引 用 户 目光 。 例 如 ， 
联想 手机 中 的 “超级 相册 ”APP 就 采用 网 格 布局 模式 来 排列 照片 ， 如 图 2-9 所 示 。 


图 2-9 网 格 布局 模式 
(2) 轮 盘 布局 模式 : 这 种 布局 模式 比较 独特 ， 用 户 可 以 使 用 手指 来 转动 轮 盘 ， 以 实现 不 同 
的 功能 ， 在 很 多 抽检 游戏 UI 中 ， 都 喜欢 采用 这 种 大 转盘 的 布局 模式 。 例 如 ， 建 设 银行 手机 
银行 的 主 界面 也 是 采用 轮 盘 布局 模式 ， 给 用 户 带 来 耳目 一 新 的 感觉 ， 如 图 2-10 所 示 。 


2-10 ” 辊 盘 布局 模式 


2.2.5 “分 段 荣 单 式 布局 | 


分 段 菜单 式 布局 主要 采用 “文字 + 下 拉 箭 头 Segment Control( 段 控 制 )” 的 方式 来 排列 办 
面 中 的 各 种 元 素 ， 设 计 者 可 以 在 某 个 按钮 中 隐藏 更 多 的 功能 ， 使 界面 向 约 而 不 向 单 。 
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例如 ， 在 “大 众 点 评 ”APP 的 电影 / 演出 界面 中 ， 就 安排 了 “品牌 ” “全 城 ”“ 离 我 最 近 ” 
以 及 “特色 "4 个 分 段 菜单 , 单 击 相应 的 下 拉 箭 头 后 ,用 户 可 以 在 展开 的 菜单 中 找到 更 多 的 功能 ， 
如 图 2-11 所 示 。 


《 i tk | sx* |) Q 《 Q 
品牌 全 城 高 品 襄 城 高 我 最 近 特色 
两 图 铁 站 全 部 

全 部 MC 影 城 

世 甬 区 卉 酒 国际 影 城 

浏阳 市 万 达 影 城 

雨 花 区 3 CGV 影 城 

长 沙县 金 逸 影 城 

天 心 区 恒 大 影 城 

开 福 区 中 影 国际 影 城 

关 苗 区 大 地 影院 


芒果 影 业 


Ed 


图 2-11 分 段 菜 蛙 式 布局 


2.2.6 ”点 聚 式 布局 OD 


扩 聚 式 布 局 又 可 以 称 为 “局 形 扩 展 式 布局 ”， 这 种 布局 的 展示 方式 比较 灵活 ， 而 且 可 以 
带 来 更 加 开阔 的 界面 效果 。 

在 设计 一 些 复杂 的 APP 层级 框架 上 时， 可 以 采用 点 聚 式 布 局 导航 ， 将 一 些 用 户 使 用 频率 比 
较 高 的 核心 内 容 采 用 并 列 的 导航 放置 在 一 个 “点 ”中 ， 例 如 易 信 与 tumblr 的 客户 端 就 是 采用 
这 种 模式 。 图 2-12 所 示 为 点 聚 式 布局 。 


图 2-12 ”点 聚 式 布 局 
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点 聚 式 布局 的 缺点 也 比较 明显 , 首先 是 一 些 和 常用 功能 可 能 被 隐藏 起 来 , 用户 难 以 发 觉 。 
其 次 ， 这 种 布局 模式 对 入 口交 互 的 功能 可 见 性 要 求 高 ， 增 加 了 设计 的 难度 。 


2.2.7 转盘 式 布局 | 


转盘 式 布 局 又 称 为 “走马 灯 式 布局 ”， 主 要 采用 图 片 坏 绕 在 
手机 界面 的 四 周 ， 这 种 布局 操作 起 来 比较 简单 ， 而 且 方 便 用 户 单 
手 进行 操作 ， 很 多 手机 抽奖 游戏 第 第 运用 这 种 布局 模式 。 图 2-13 
所 示 为 转盘 式 布局 。 


2.2.8 导航 栏 置 底 式 布局 oD| 


导航 栏 置 底 式 布局 的 设计 比较 方便 ， 而 且 适 合 单 手 操作 ， 很 

多 APP 设计 师 都 十 分 青睐 这 种 布局 模式 ,如 “ 微 信 ” “ 微 博 ”“ 斗 国生 2 aa 

鱼 ” 等 手机 客户 端 都 是 采用 这 种 方式 。 
例如 , 在 手机 斗 鱼 APP 的 界面 底部 , 就 有 “直播 ”“ 视 频 ”“ 关 

注 ”“ 鱼 吧 ” 以 及 “发 现 ”5 个 导航 按钮 ， 方 便 用 户 快捷 操作 。 用 户 可 以 点 击 不 同 按钮 切换 

至 相应 的 页 面 ， 操 作 十 分 方便 ， 功 能 分 布 也 比较 明确 ， 如 图 2-14 所 示 。 


“= 我 的 ”附近 ”车 队 
oe SS HW RD 
联盟 


ET | x 心 se 


零 鱼 吧 排行 
活动 。 站 更 新 全 球 首 亲 红 你 的 部 仪 式 E 天 

入。 是 你 

是 你 帅气 的 如 加 Ea ma 

想 学 拍照 

~ PA a D> 大 司马 : 同学 们 我 来 了 大 区 .。 MSW 小 组 赛 5 月 14| -| 
国 ! p02 1 EE] OO al 中 
商 渴 | 鱼 J 将 清 甘 注 吧 


图 2-14 ”导航 栏 置 底 式 布局 


2.2.9 ” 磁 贴 状态 式 布 局 \) 
磁 贴 状态 式 布 局 与 Windows 8 的 Metro 界面 风格 非常 相似 ， 是 一 种 风格 比较 新 颖 的 设计 
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语言 ， 如 图 2-15 所 示 。 界 面 中 的 各 种 元 素 以 Tile( 磁 贴 ) 的 形式 展现 ， 而 且 这 些小 方块 可 以 
动态 显示 信息 ， 还 可 以 按照 用 户 的 意愿 进行 分 组 、 删 除 等 操作 。 
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图 2-15 磁 贴 状态 式 布局 


2.2.10 ”超级 菜单 式 布局 oD| 


超级 菜单 式 布 局 的 导航 比较 酶 炫 ， 如 “天 天 快报 ”“163 的 新 闻 客 户 端 ”“ 百 度 Site” 
APP 等 都 采用 这 种 布局 模式 ， 在 这 些 APP 的 内 容 页 面 中 ， 用 户 只 需 左右 请 动 屏幕 ， 即 可 切换 
查看 不 同 的 类 别 ， 操 作 的 连续 性 非常 强 , 用户 体 验 也 很 流畅 。 图 2-16 所 示 为 超级 菜单 式 布局 。 
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一 个 宅男 ， 就 用 这 3 种 方 


岳 林 时光， 老 长 沙 的 记忆 ， 值 得 回味 ! 式 ， 有 没有 机 会 参加 奥运 
二 会 ? 


中 国运 动员 开幕 式 入 场 玩 路 自拍 模式 


本 
a cc 人 作证 SHE 的 事 。 炮 笑 原创 
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三 只 虎 捕 杀 一 只 能 ， 能 连 一 点 反抗 能 力 
也 没有 


高 清 : 雷 声 任 旗手 引领 中 国 军团 踏 入 马 拉 
卡 纳 


男子 等 红绿灯 无 聊 拿 出 手 


机 ， 拍 下 的 东西 让 他 落荒 二 下 各 PE ln FFAG TE iL 


图 2-16 超级 菜单 式 布局 


大 学 生 署 假 调查 : 一 半 以 上 
宅 在 家 靠 手 机 电脑 打发 时 间 刻 


2.2.11 导航 栏 置顶 式 布局 J 


导航 栏 置顶 式 布局 与 导航 栏 置 底 式 布局 刚好 相反 ， 它 主要 将 导航 按钮 布置 在 界面 的 顶部 。 
当然 ， 不 同 的 APP 也 有 不 同 的 设计 规则 ，“YY”APP 就 是 采用 导航 栏 置顶 式 布 局 和 选项 卡 
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下 区 区 区 


式 布局 混合 应 用 ， 如 图 2-17 所 示 。 


团 战 广场 大 厅 任务 
Ea 2256238439yy 日 任务 中 心 
者 0 仿 20 每 日 任务 
今日 获得 金币 0/2230 
良 班 任务 
[© 招收 跟班 


2-17 “YY”APP 界面 
另外 ， 还 有 一 种 比较 第 用 的 请 动 选项 卡 式 布局 ， 它 可 以 容纳 更 多 的 选项 ， 而 且 用 户 可 以 
直接 通过 手指 滑动 导航 栏 寻找 项 目 ， 在 导航 类 别 比较 多 时 非常 实用 。 
例如 ,在 “ 斗 鱼 ”APP 的 消息 界面 中 ,就 可 以 滑动 上 面 的 导航 区 ,切换 查看 “分 类 ”“ 推 
存 “全 部 ” “绝地 求生 ”以 及 游戏 直播 ， 如 图 2-18 所 示 。 
© 


推荐 


绝地 求生 全 军 出 击 刺激 战场 英 锥 联盟 


六 地: Es 


正 能 昌 EE 者 荣 规 新 游 中 心 更 多 


Q 活动 襄 旦 移 - 利 激战 场 明星 开 黑夜 | 预订 | 


热门 推荐 


【 阳 卫 社 ] 给 我 的 对 手 一 首 .， ” 吃 鸡 之 路 太 艰 难 


2-18 滑动 选项 卡 式 布局 


2.2.12 幻灯 片 式 布局 | 


幻灯 片 式 布 局 第 用 于 并 列 展示 图 片 或 者 整 块 内 容 ， 用 户 只 需 用 手指 左右 滑动 屏幕 ， 即 可 
切换 查看 相关 的 内 容 ， 如 图 2-19 所 示 。 
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€ 46/63 
而 向 上 滑动 删除 


如 果 是 在 APP 中 采用 幻灯 片 式 布 局 ， 那 么 需要 注意 控制 幻灯 片 的 数量 ， 通 第 使 用 7 ~ 8 
张 幻 灯 片 比较 适宜 ， 以 免 用 户 操 作 过 多 产生 疲 灾 ， 进 而 对 该 APP 失去 兴趣 。 

另外 ， 采 用 幻灯 片 式 布局 时 ， 设 计 者 应 在 界面 中 放置 一 些 视 觉 上 暗示 元 素 ， 如 位 置 、 数 量 、 
分 页 标识 码 等 小 标签 ， 这 样 用 户 更 加 容易 上 和 手 。 

人 在 “天 天 快报 ”的 图 片 新 闻 界 面 中 ， 左 下 角 就 有 一 个 数量 标签 ， 显 示 了 用 户 当 前 训 览 图 
片 的 序号 以 及 所 有 图 片 的 数量 ， 如 图 2-20 所 示 。 


从 会 elel [加 11:18 上 4 芝 会 6@ull eull CD 11:18 上 4 
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2.3 优化 布局 : 车 握 移动 U1 布局 末 上 略 


UI 的 至 现 需要 布局 的 规划 ， 同 样 ， 页 面 布局 也 有 理论 的 文 撑 。 本 小 节 将 为 读者 补充 一 些 
布局 的 理论 知识 ， 以 达到 读者 能 够 优化 布局 的 目的 。 


2.3.1 图 表 信 息 布 局 设计 方法 


图 表 信 息 布 局 可 以 让 APP 显得 更 加 商务 , 这 也 是 商业 、 金融 类 APP 中 最 第 见 的 布局 方式 ， 
如 图 2-21 所 示 。 


pa 图 表 要 素 显示 完整 ,标题 区 比较 突出 ,而 且 用 户 可 以 从 上 到 下 进行 阅 
ts 读 ， 体 验 比 较 顺 畅 


虽然 标题 区 突出 ， 但 由 于 标题 过 多 ， 造 成 了 单个 标题 不 够 突出 的 现象 ， 
Who 而 且 信息 量 太 多 而 APP 的 空间 却 有 限 ， 难 以 展示 所 有 数据 
图 2-21 图 表 信息 布局 
例如 ， 微 指数 APP 中 的 很 多 界面 大 多 都 是 采用 图 表 信 息 布局 模式 ， 在 界面 中 ， 数 据 比较 


清晰 ， 用 户 可 以 一 眼看 到 “整体 趋势 ”“ 地 域 解读 ”“ 年 龄 分 布 ” 等 信息 ， 而 且 还 具有 简单 
的 图 表 分 析 模 式 ， 图 2-22 所 示 为 微 指数 网 页 界面 。 


图 2-22 ” 微 指数 APP 


2.3.2 ”界面 细节 设计 方法 oD| 


APP 软件 在 细 市 设计 上 的 完善 ， 主 要 从 以 下 方面 入 手 ， 如 图 2-23 所 示 。 


Photoshop 一 一 二 p> 
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细节 设计 上 的 完善 适当 借鉴 


细节 标准 界面 布局 


图 2-23 ”界面 细节 完善 方法 

当 内 容 创 新 较为 困难 时 ， 在 细节 上 精益 求 精 就 成 为 APP 软件 能 够 出 类 拔 芋 的 主要 方式 ， 
通过 细节 的 完美 程度 获得 用 户 的 好 感 ， 从 而 帮助 APP 建立 品牌 优势 。 

在 以 上 内 容 中 ， 有 3 个 最 为 关键 的 细节 ， 下 面 针对 这 3 个 细节 进行 深入 分 析 。 

1. 适当 借鉴 

无 论 是 在 国内 还 是 国外 ，APP 市 场 都 较为 火热 ， 但 在 数量 庞大 的 APP 中 ， 大 部 分 的 APP 
功能 比较 单一 ， 过 分 模仿 的 情况 导致 独特 的 模式 变 得 大 众 化 。 适 当 借 览 是 一 种 明智 的 选择 ， 
具体 分 析 如 图 2-24 所 示 。 


大 部 分 的 开发 者 都 会 去 模仿 其 他 应 用 软件 的 相关 设计 ， 但 是 被 模仿 
ds 的 那些 设计 却 并 一 定 是 较为 优秀 或 独特 的 


| 给 终 保持 适当 的 信 鉴 , 可 以 从 别人 的 APP 运作 中 获得 一 些 想法 ， 同 


时 将 自身 的 创意 融入 其 中 ， 打 造 差 异 制胜 的 结果 


对 比分 析 


图 2-24 ”适当 借鉴 的 分 析 


2. 界面 运作 

在 同一 款 APP 中 ， 用 户 的 界面 运作 结果 应 当 是 保持 一 致 的 。 这 里 的 一 致 性 主要 是 指 形式 
上 的 一 致 ， 以 APP 中 的 列表 框 为 例 ， 如 果 用 户 双 击 其 中 的 革 项 ， 使 得 某 些 事件 发 生 ， 那 么 用 
户 双击 其 他 任何 列表 框 中 的 同一 项 ， 也 应 该 有 同样 的 结果 ， 这 就 是 一 致 性 的 体现 。 

保持 界面 运作 结果 的 一 致 对 于 APP 的 长 期 发 展 是 有 利 的 ， 尤 其 是 培养 用 户 的 使 用 习惯 ， 
相关 的 分 析 如 图 2-25 所 示 。 

3. 界面 布局 

界面 布局 是 最 能 够 直接 展示 特色 的 地 方 ， 具 体 的 分 析 如 图 2-26 所 示 。 
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追求 创意 的 APP 如 果 在 运作 的 一 致 性 上 是 不 协调 的 ， 那 么 即使 标 新 
问题 体现 。 革 4 立 异 也 可 能 无 法 得 到 用 户 的 认可 


相关 对 策 = 在 细节 上 使 APP 保持 良好 的 一 致 性 运作 模式 ， 通 过 培养 用 户 的 使 用 
习惯 ， 来 降低 获得 核心 用 户 的 直接 成 本 


图 2-25 界面 运作 分 析 


l 没有 特色 是 APP 普遍 的 问题 ， 要 想 做 到 优异 创新 和 差异 制胜 ， 不 仅 
es 仅 要 求 界面 功能 齐全 ， 还 要 能 从 布局 体现 新 意 。 


相关 对 策 界面 布局 需要 多 借鉴 佳作 ， 了 解 大 众 对 于 优秀 布局 的 定义 ， 从 而 在 
借鉴 别人 的 同时 保持 个 人 创新 


2-26 ”界面 布局 分 析 


2.3.3 ”移动 U1 的 布局 规则 | 


在 设计 移动 UI 时， 用 户 还 需要 光 握 一 些 布局 原则 ， 以 便 为 用 户 带 来 更 好 的 操作 体验 。 
1 . 统一 的 Logo 位 置 
首先 需要 对 APP 的 Logo 位 置 进行 规划 ， 最 好 将 所 有 页 面 的 Logo 位 置 进行 统一 ， 即 不 
管用 户 进入 哪个 页 面 ，Logo 都 处 在 同一 个 位 置 处 。 
例如 ， 在 “一 点 资讯 ”APP 主 界面 中 ， 用 户 可 以 左右 请 动手 机 屏幕 来 切换 界面 功能 ， 但 
其 Logo 一 直 处 于 界面 左上 角 的 位 置 处 ， 如 图 2-27 所 示 。 
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2. 内 容 的 排列 次 序 合理 

当 界 面 中 展现 的 信息 内 容 比较 多 时 ， 应 尽量 按照 先后 次 序 进行 合理 排序 ， 将 所 有 重要 的 
选项 或 内 容 放 在 主 界 面 中 ， 把 用 户 最 第 用 、 最 喜欢 的 功能 排 在 前 面 ， 把 一 些 比 较 少 用 但 也 不 
可 少 的 功能 排 在 后 面 ， 把 一 些 可 有 可 无 的 功能 放 入 隐 减 菜单 中 。 

例如 , 在 “ 亡 果 TV”APP 主 界面 中 , 会 根据 用 户 的 直接 需求 ,推出 相应 的 精品 视频 资源 ， 
比如 会 时 第 上 线 最 新 电影 等 ， 用 户 直 接 在 主 界 面 中 点 击 即 可 播放 ， 如 图 2-28 所 示 。 
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图 2-28 “让 果 TV”APP 界面 

当然 ， 用 户 如 果 想 通过 APP 直接 查看 正在 播放 的 电视 节目 ， 这 可 能 是 比较 少 用 的 功能 ， 
用 户 需 要 在 导航 栏 中 找到 并 切换 至 “直播 ”界面 ， 然 后 选择 相应 的 电视 台 。 

3. 突出 APP 的 重要 条 目 

很 多 APP 都 有 一 些 重要 条 目 ， 在 布局 时 应 尽量 将 其 放置 在 界面 的 突出 位 置 ， 如 顶端 或 者 
底部 的 中 间 位 置 处 。 

例如 ，QQ 空间 的 主要 功能 就 是 发 表 个 人 动态 信息 ， 因 此 在 底部 导航 栏 中 间 位 置 放置 了 
一 个 “+” 号 按钮 ， 点 击 该 按钮 后 , 即 可 看 到 “说 说 ”“ 照 片 ”“ 视 频 ”“ 直 播 "”“ 动 效 相 机 ”“ 签 
到 ”“ 动 感 影集 ” “日志” 等 导航 按钮 ( 此 处 也 满足 先后 次 序 的 原则 )， 而 且 这 里 还 采用 点 聚 
式 布局 模式 ， 如 图 2-29 所 示 。 

男 外 ， 对 于 一 些 比 较 重 要 的 信息 ， 如 消息 、 提 示 、 通 知 等 ， 应 在 APP 界面 中 的 醒目 位 置 
上 进行 展示 ， 使 用 户 能 及 时 看 到 。 

4. 界面 长 度 要 适当 

APP 的 主 界面 最 好 不 宜 过 长 ， 而 且 每 个 子 界 面 的 长 度 也 要 适当 。 当 然 ， 如 果 某 些 特别 的 
APP 内 容 过 长 ， 则 最 好 在 界面 中 的 某 个 固定 位 置 设置 一 个 “返回 顶部 ”按钮 或 者 “内 容 列 表 ” 
菜单 按钮 ， 让 用 户 可 以 一 键 到 达 页 面 顶部 或 者 内 容 的 特定 位 置 。 
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9? 专家 指点 2 


界面 是 软件 与 用 户 交互 的 最 直接 的 层 ， 界 面 的 好 坏 决 定 用 户 对 软件 的 第 一 印象 。 而 
且 设 计 良 好 的 界面 能 够 引导 用 户 自己 完成 相应 的 操作 ， 起 到 向 导 的 作用 。 同 时 界面 如 同 
人 的 面孔 ， 具 有 吸引 用 户 的 直接 优势 。 


例如 ，“ 汽 车 之 家 ”网 站 论坛 中 由 于 大 部 分 帖子 的 内 容 比较 丰富 ， 因 此 页 面 拉 得 很 长 ， 
就 在 右 下 角 设 置 了 一 个 “回复 ”和 “返回 顶部 ”按钮 , 方便 浏 览 用 户 进行 相关 操作 , 点 “回复 
按钮 可 以 快速 切换 至 页 面 底部 的 回复 功能 区 ， 点 击 “ 返 回 顶部 ”按钮 国 则 可 以 快速 回 到 页 面 
顶部 的 菜单 栏 功 能 区 ， 如 图 2-30 所 示 。 


加 等 待 115 天 终 将 你 要 回 家 ， 株 洲 首 提 人 金色 智 .， 加 等 待 115 天 终 将 你 至 回 家 ， 株 洲 首 提 金 色 智 (人 
现在 有 了 
四 8 。 回复 等 待 115 天 终 将 你 娶 回 家 ， 株 洲 首 提 金 
色 智 尊 
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置换 雅 疗 享 受 1000 元 补贴 优惠 用 让 ”a 


此 帖 已 被 收录 至 论坛 精 选 日 报 - 精 挑 细 选 。 想 订 
图 下 您 想 说 的 训 阅 此 频道 ， 性 这 里 了 解 详情 。 


小 学 语文 没 毕业 ， 文 采 不 好 大 家 将 就 着 看 吧 
等 待 115 天 终 拿 下 。 湖 南 株洲 首 辆 金色 两 驱 至 苯 
。 事 实 告 诉 我 的 等 待 是 值得 的 。 

选 车 篇 


加 决定 买 车 是 我 老婆 家 里 搞 征收 ， 同 时 老婆 又 给 我 
这 张 最 美 生 了 一 少 葡 。 家 里 两 小 孩 了 ， 出 门 没 车 不 方便 ， 
-pe 


二 老 是 要 找 我 苞 借 车 。 但 是 我 有 远见 。 老 早 就 把 我 
| 关注 的 车 型 都 研究 了 一 遍 。 最 终 选 定 了 博 越 。 
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图 2-30 “汽车 之 家 ”网 站 论坛 界面 
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对 于 专门 设置 的 一 些 导航 菜单 ， 页 面 应 尽 可 能 短小 ， 要 让 用 户 一 眼 即 可 看 完 其 中 的 内 容 。 
尤其 要 避免 在 导航 菜单 中 使 用 滚屏 ， 人 否则 即使 设计 者 花心 思 在 其 中 诡 加 了 很 多 功能 ， 用 户 可 
能 还 没 看 完 就 没 耐 心 继续 往 下 翻 了 。 
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3.1 博 人 眼球: 掌握 U| 的 视觉 特色 
视觉 是 一 个 生理 学 词汇 。 光 作用 于 视觉 器 官 ， 使 其 感受 细胞 兴奋 ， 信 息 经 视觉 神经 系统 


加 工 后 便 产 生 视觉 (vision)， 人 类 通过 视觉 感官 从 外 界 获 取信 息 。UI 设计 通过 屏幕 和 人 有 眼 ， 
同人 的 大 脑 传递 信息 。 本 市 将 为 读者 介绍 UI 视 完 特色 的 设计 要 挟 。 


3.1.1 打造 简洁 与 抽象 美感 OD 
做 得 好 的 移动 UI 可 以 直观 、 生 动 、 形 象 地 向 用 户 展示 信息 ， 人 简明 便捷 地 让 用 户 产 生 审 
例如 ， 人 简约 明快 型 的 移动 U 开 追求 的 是 空间 的 实用 性 和 灵活 性 ， 可 以 让 用 户 感受 到 简洁 

明快 的 时 代 感 和 抽象 的 美 。 


在 视觉 效果 上 ， 简 约 明 快 型 的 APP UI 应 尽量 突出 个 性 和 美感 ， 如 图 3-1 所 示 。 


图 3-1 简约 明快 型 移动 UI 
简约 明快 型 的 APP UI 适合 色彩 支持 数量 较 少 的 彩屏 手机 ， 其 主要 特点 如 下 。 
@ 通过 组 合 各 种 颜色 块 和 线条 ， 使 移动 UI 更 加 简约 大 气 ， 如 图 3-2 所 示 。 


图 3-2 简约 色 块 线条 组 合 UI 
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® 和 线 、 面 等 基本 形状 构成 的 元 素 ， 再 加 上 纯净 的 色彩 搭配 ， 使 界面 更 加 整齐 有 


给 用 户 带 来 赏心悦目 的 感觉 。 
3.1.2 营造 趣味 视觉 画面 | 


趣味 性 是 指 某 事 或 者 某 物 的 内 容 能 使 人 感到 愉快 ， 能 引起 兴趣 的 特性 。 

在 移动 UI 设计 中 ， 趣 味 性 主要 是 指 通过 一 种 活泼 的 版 面 视觉 语言 ， 使 界面 具备 亲和力 、 
视觉 魅 力 和 情感 魅力 , 让 用 户 在 新 奇 、 振 人 理 的 情绪 下 次 深 地 被 界面 中 展示 的 内 容 所 打动 。 图 3-3 
所 示 为 趣味 与 独创 型 界面。 
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图 3-3 趣味 型 的 移动 UI 
在 进行 移动 UI 的 设计 时 ， 要 多 思 芳 ， 采 用 别出心裁 的 个 性 化 排版 设计 ， 赢 得 更 多 用 户 


3.1.3 ”塑造 华丽 视觉 效果 | 


华丽 型 的 移动 UI 设计 ， 主 要 是 通过 饱和 的 色彩 和 精美 的 质感 来 营造 酷 炫 的 视觉 感受 ， 
如 图 3-4 所 示 。 
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图 3-4 ”华丽 型 移动 UI 
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高 贵 华丽 型 的 移动 UI 设计 需要 用 到 更 多 的 色彩 和 更 复杂 设计 元 素 ， 因 此 更 适合 色彩 数 
量 较 多 的 彩屏 手机 。 


3.1.4 ”把握 色 彩 的 使 用 特点 | 


对 于 移动 UI 设计 来 说 ， 色 彩 是 最 重要 的 视觉 因素 ， 不 同 颜色 代表 不 同 的 情绪 ， 因 此 对 
色彩 的 使 用 应 该 和 APP 以 及 主题 相 契 合 。 例 如 ，“360 手机 助手 ”APP 的 底部 导航 栏 通过 运 
用 不 同 颜色 按钮 来 代表 其 不 同 激活 状态 ， 使 用 户 快速 知道 自己 所 处 的 位 置 ， 如 图 3-5 所 示 。 
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图 3-5 “360 手机 助手 ”APP 的 底部 导 般 栏 
在 移动 UI 的 制作 过 程 中 ， 根 据 颜色 的 特性 ， 可 以 通过 调整 其 色相 、 明 度 以 及 纯度 之 间 
的 对 比 关 系 , 或 通过 各 色彩 间 面 积 调 和 ,可 以 搭配 出 色彩 斑 痫 、 变 化 无 穷 的 移动 UI 画面 效果 。 
总 之 ， 让 自己 的 移动 UI 更 好 看 一 些 ， 更 别致 一 些 ， 这 样 就 会 在 视 涡 上 吸引 用 户 ， 给 APP 市 
来 更 多 的 下 载 量 。 


3.2 挖掘 内 普 : 提升 UI 的 文字 设计 水 平 


文字 是 人 类 文化 的 重要 组 成 部 分 。 在 UI 设计 中 ， 文字 和 图 片 是 其 两 大 构成 要 素 ， 文 字 
排列 组 合 的 好 坏 直 接 影响 其 版 面 的 视 沉 传 达 效 果 。 因 此 ， 文 字 设 计 是 提高 UI 的 诉求 力 ， 赋 
予 作品 版 面 审 美 价值 的 一 种 重要 技术 。 


3.2.1 内容 设计 简化 | 


在 APP UI 的 图 案 设计 过 程 中 , 每 一 个 页 面 不 要 放置 过 多 的 内 容 , 否则 会 让 用 户 难以 理解 ， 
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才 到 得 


操作 也 会 显得 更 加 烦琐 。 
例如 ， 可 以 使 用 一 些 半 透明 效果 的 图 案 来 作为 播放 器 的 控制 栏 ， 使 用 户 在 操作 时 也 可 以 
看 到 视频 播放 画面 ， 如 图 3-6 所 示 。 


3-6 半 透 明 歼 果 的 控制 栏 


3.2.2 合理 的 字体 设计 | 


在 设计 APP UI 中 的 文字 时 ， 要 谨 记 文字 不 但 是 设计 者 传达 信息 的 载体 ， 也 是 UI 设计 中 
的 重要 元 素 ， 必 须 保 证 文字 的 可 读 性 ， 以 严谨 的 设计 态度 实现 新 的 突破 。 通 币 ， 经 过 艺术 设 
计 的 字体 ， 可 以 使 APP UI 中 的 信息 更 形象 、 更 有 美感 。 

随 着 智能 手机 APP 的 崛起 ， 人 们 在 智能 手机 上 进行 操作 、 阅 读 与 信息 浏 览 的 时 间 越 来 越 
长 ， 也 促使 用 户 的 阅读 体验 变 得 越 来 越 重 要 。 在 APP 界面 中 ,文字 是 影 啊 用 户 阅 读 体 验 的 关 
键 元 素 ， 因 此 设计 者 必须 让 界面 中 的 文字 可 以 准确 地 被 用 户 识别 。 

3-7 所 示 为 没有 大 小 写 的 字母 O 与 阿拉 伯 数 字 0， 从 图 中 基本 上 看 不 出 区 别 。 
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图 3-7 不 同 大 小 写 的 字母 O 与 0 
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还 要 注意 避免 使 用 不 弟 见 的 字体 ， 这 些 缺 乏 识别 度 的 字体 可 能 会 让 用 户 难以 理解 其 中 的 
文字 信息 ， 如 图 3-8 所 示 。 


3-8 避免 使 用 不 常见 的 字体 
另外 ， 移 动 UI 中 的 文字 应 尽量 使 用 熟悉 的 词汇 与 搭配 ， 这 样 可 以 方便 用 户 对 移动 UI 的 
理解 与 操作 ， 如 图 3-9 所 示 。 


验光 移动 滑 块 来 解锁 


3-9 尽量 使 用 熟悉 的 词汇 与 搭配 


在 进行 APP UI 的 设计 与 文字 编排 时 ， 应 该 多 使 用 一 些 用 户 比 较 熟 入 与 常见 的 词汇 进 
行 搭配 ， 这 样 不 仅 可 以 避免 用 户 耗 党 额外 时 间 去 思考 其 含义 ， 还 可 以 防止 用 户 对 文字 产 
生 歧 义 ， 从 而 让 用 户 更 加 轻松 地 对 界面 进行 使 用 。 


N44 


“和 和 


”透析 木质 医 
才 才 人 本 移动 UI 视 竞 交互 设计 法 则 


3.2.3 ”突出 文字 层次 o| 

在 设计 以 英文 为 主 的 移动 UI 时 ， 设 计 者 可 以 巧 用 字母 的 大 小 写 变化 ， 不 但 可 以 使 界面 
中 的 文字 更 加 具有 层次 感 ， 而 且 可 以 使 文字 信息 在 造型 上 富有 乐趣 感 ， 同 时 给 用 户 带 来 一 定 
的 视觉 舒适 感 ， 并 可 以 更 加 快捷 地 接受 界面 中 的 文字 信息 。 

如 图 3-10 所 示 ， 通 过 3 副 移动 UI 图 像 对 比 可 以 发 现 ， 当 界面 中 的 全 部 文字 为 大 写 或 小 
写字 母 时 ， 界 面 文字 整体 上 显得 十 分 呆板 ， 给 用 户 带 来 的 阅读 体验 十 分 不 理想 ， 而 采用 传统 
首 字母 大 写 的 文字 组 合 穿插 方式 ， 可 以 让 移动 UI 中 的 文字 信息 变 得 更 加 灵活 ， 突 出 重点 ， 
更 便于 用 户 阅读 。 


WEDNESDAY wednesday 
26° C0 Cp 
全 部 采用 大 写 全 部 采用 小 写 
字母 的 界面 区 字母 的 界面 家 
党 32°C 站 
cS: 14°C 3 
CD 
O 
图 3-10 不 同 大 小 写字 母 搭 配 的 界面 文字 
3.2.4 ”信息 表达 清晰 VO 


在 设计 移动 UI 中 的 文字 效果 时 ， 除 了 要 注意 英文 字母 的 大 小 写 外 ， 字 体 以 及 字体 大 小 
的 设置 也 是 影响 效果 表达 的 一 个 重要 因素 。 


“信息 传递 ”是 指 人 们 通过 声音、 文字 、 图 像 或 者 动作 相互 沟通 消息 。 信 息 传 递 研 
完 的 是 什么 人 ， 向 谁 说 什么 ， 用 什么 方式 说 ， 通 过 什么 途径 说 ， 达 到 什么 目的 。 


通过 比较 可 以 发 现 ， 不 同 大 小 和 字体 的 文字 组 合 可 以 更 清晰 地 表达 文字 信息 ， 有 助 于 用 
户 快 速 抓 住 文字 的 重点 ， 进 而 达到 更 吸引 眼球 的 效果 ， 不 同 字体 大 小 的 文字 表示 如 图 3-11 
所 未。 
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火 火 英语 BE 曙 星火 英语 
考 前 必 背 | 四 六 级 作文 终极 模板 EN 考 前 必 背 | 四 六 级 作文 终极 模板 


京东 JD.COM 京东 JD.COM 

全 护肤 套装 |520 告 白 季 |2 件 8 折 人 护肤 套装 |520 告 白 季 |2 件 8 折 
文件 传输 助手 文件 传输 助手 
[图 片 ] [图 片 ] 

58 58 同 城 5Q 58 同 城 
简历 反馈 提醒 简历 反馈 提醒 
订阅 号 订阅 号 
率 运 大 转 狠 IN 广 州 : 碰 磁 运气 幸运 大 转盘 IN 广州 : 辜 磁 运气 
流量 大 转盘 流量 大 转盘 
开发 中 开发 中 

微 信 通讯 录 发 现 我 微 信 通讯 录 发 现 我 


图 3-11 不 同 字体 大 小 的 文字 表示 


如 图 3-12 所 示 ， 经 过 对 比 可 以 发 现 ， 右 图 中 的 文字 阅读 起 来 更 加 方便 ， 这 是 因为 该 界面 
中 的 文字 大 小 更 符合 用 户 阅 读 的 体验 。 


使 《西游 记 》 在 线 阅读 CQ 


< > = O 0 < 一 OO 0 
图 3-12 不同 尺寸 大 小 的 文字 表示 


当然 ， 对 于 一 般 阅 读 类 APP 界面 中 的 文字 大 小 ， 根 据 APP 的 定制 特性 ， 用 户 都 可 以 通 
过 相关 设置 或 者 手势 进行 调整 ， 然 后 再 进行 阅读 ， 通 过 手势 调整 文字 的 字体 大 小 如 图 3-13 
所 示 。 
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醒 改 妊 生 个 至 仁 , 友 明 万 乱 拓 成 关 - 
和 敬 知 造化 会 元 功 ， 策 看 《西游 释 后 传 ) - 
著 闻 天 地 之 教 , 有 十 二 万 九 工 Fw 岁 为 一 元 。 梅 一 元 分 为 十 二 会 ， 乃 子 


< 


图 3-13 


显得 断断续续 ， 缺 少 连贯 感 。 


如 图 3-14 所 示 ， 左 图 中 的 界面 正文 显得 十 分 拥挤 ， 用 户 在 浏览 这 些 文字 时 容易 产生 疲劳 
感 ， 因 此 需要 对 行距 和 字符 间 中 进行 适当 的 调整 ， 另 外 ， 还 可 以 在 文字 区 域 中 设计 上 下 请 动 


渴 鸿 未 分 天 炉 咏 ， 茫 东兴 戏 无 人 由 。 
自从 盘古 矿 江 车 ,开始 从 将 漠 是 籼 。 


的 手势 触 控 效果 ， 方 便 用 户 翻 页 浏 览 。 


时 岳 着 山门 票 去 哪儿 网 门票 预订 


票 价 详情 评价 


胜出 之 一 ， 岳 竹山 位 于 古城 长 少 模 本 举 ， 状 成 市 山岳 型 
风景 名 胜 区 。 已 天 ij 始 9 香 区 有 力 几 时区、 橘子 省 个 区 。 其 
中 药 山 景区 系 核心 景区 ， 景 区 内 有 后 戎 书院 、 潮 % 齐 、 荐 
山寺、 云 庆 富 、 新 加 学 全 | 昌 叶 点 等 

后 办 | 册 的 Htt 理 | 置 名 和 桂 ， 岳 绵 | 革 | 朋 属 上 后 竺 山 ， 古人 
把 后 圾 |L 风 为 南岳 七 十 一 峰之 一 ， 称 为 灵 衣 妖 。 在 很 久之 


< 一 会 U 


加 5 其 山门 票 去 哪儿 网 门票 两 J C 


票 价 详情 评价 


景点 介绍 
岳 蕊 山海 拔 300.8 米 ， 是 南岳 衡山 72 峰 之 一 ， 
在 橘子 洲 旅游 景区 内 ， 是 国家 级 重点 风景 名 胜 
区 。 也 是 中 国 四 大 赏 枫 胜 地 之 一 。 岳 蔚山 位 于 
古城 长 沙 湘江 西岸 ， 为 城市 山岳 型 风景 名 胜 区 
。 已 开放 的 景区 有 忒 山 景 区 、 桶 子 洲 景区 。 其 
中 芒 山 景区 系 核心 景区 ， 景 区 内 有 岳 荐 书院 、 
爱 晚 带 、 葡 山寺 、 云 忒 宫 、 新 民 学 会 旧址 景点 
等 。 

< = 会 0 


3-14 ”不同 间距 的 文字 效果 


通过 手势 调整 文字 字体 大 小 


3.2.5 ”掌握 文字 间距 | 


在 人 们 阅读 移动 UI 中 的 文字 时 ， 不 同 的 文字 间距 也 会 带 来 不 一 样 的 阅读 感受 。 例 如 ， 
文字 之 间 过 于 紧密 的 间 跑 可 能 会 市 给 读者 更 多 的 紧迫 感 ， 而 过 于 稀 玻 的 文字 间距 则 会 使 文字 


到 析 本 质 : 医 
移动 UI 视 竞 交互 设计 法 则 


多 后 舌 山 门票 去 哪儿 网 门票 预 J 


mA 


信 食 俱全 食 4.51 分 

票 价 详情 评价 
景点 介绍 
爱 晚 享 、 蒋 山寺 、 云 欧 宫 、 新 民 学 会 旧址 景点 
等 。 


岳 青 山 的 地 理 位 
衡山 ， 古 人 把 岳 谣 山 列 为 南 


为 足 。” 故 名 岳 航 ; 
基于 古生代 ， 形 成 于 中 生 代 ， 发 展 于 新 生 代 ， 
< 三 OO [0 
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在 进行 APP UI 的 文字 设计 时 ， 一定 要 把 握 好 文字 之 间 的 间距 ,这样 才 能 给 用 户 带 来 流 
畅 的 阅读 体验 。 


3.2.6 ”文字 颜色 设计 o| 


过 去 的 移动 UI 设计 大 大 低估 了 色彩 的 作用 。 色 彩 其 实 是 一 个 了 不 起 的 工具 ， 应 该 被 充 
分 利用 ， 尤 其 是 文字 的 颜色 部 分 。 

适当 地 设置 APP 界面 中 文字 的 颜色 ， 也 可 以 提高 文字 的 可 读 性 。 通 第 的 手法 是 给 文字 内 
容 穿插 不 同 的 颜色 或 者 增强 文字 与 背景 之 间 颜 色 的 对 比 ， 使 界面 中 的 文字 有 更 强 的 表达 能 
帮助 用 户 更 快 地 理解 文字 信息 ， 同 时 也 方便 用 户 对 其 进行 浏览 和 操作 ， 如 图 3-15 所 示 。 
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图 3-15 文字 颜色 应 用 效果 

如 图 3-16 所 示 ， 图 中 的 文字 虽然 有 字体 大 小 和 间距 的 区 别 ， 但 颜色 比较 单一 ， 用 户 无 法 
快速 获取 其 中 的 重点 信息 ， 此 时 可 以 尝试 转换 文字 的 颜色 。 

从 图 3-16 中 可 以 发 现 ， 通 过 改变 不 同 区 域 的 文字 颜色 ， 可 以 使 这 两 个 部 分 的 文字 区 别 更 
加 明显 。 其 中 ， 可 以 明显 发 现 红 色 部 分 的 文字 比 黑 色 部 分 的 文字 更 加 醒目 ， 设 计 者 可 以 利用 
此 方法 去 突出 移动 UI 中 的 重点 信息 。 

另外 ， 还 可 以 通过 调整 文字 颜色 与 背景 颜色 的 对 比 关 系 来 改变 用 户 的 阅读 体验 。 适 当 的 
颜色 对 比 , 能 够 清晰 呈现 文字 , 使 其 适用 于 长 时 间 阅 读 , 使 用 户 体验 更 加 流畅 与 舒适 , 如 图 3-17 
所 未。 
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透析 本 质 : 
移动 UI 视觉 交互 设计 法 则 


多 橘子 洲 沙滩 游 乐园 门票 -去 哪儿 网 门票 预订 


1、 沙 滩 公园 门票 : 50 元 
2、 观 光 车 ; 20 元 


3、 停 车 场 : 小 型 车 辆 5 元 /次 、 大 型 车 辆 10 元 / 
次 ( 12 小 时 之 内 按 次 收费 ， 超过 时 间 ， 加 收 5 
元 ) 。 


多 格子 洲 沙滩 游乐 园 门票 -去 哪儿 网 门票 预订 


1、 沙 淮 公园 门票 : 50 元 

2、 观 光 车 : 20 元 

3、 停 车 场 : 小 型 车 辆 5 元 /次 、 大 型 车 辆 10 元 / 
次 ( 12 小 时 之 内 按 次 收费 ， 超 过 时 间 ， 加 收 5 
75c ) 。 


< 一 OO LU 


3-16 不 同 颜 色 的 文字 效果 


多 橘子 洲 沙滩 游乐 园 门 票 - 去 哪儿 网 门票 预订 


多 橘子 洲 沙滩 游乐 园 门 票 -去 哪儿 网 门票 预订 


3-17 不同 文字 颜色 与 背景 


3.2.7 ”画面 美感 设计 


色 的 对 比 关 系 产 生 的 文字 效果 


在 设计 移动 UI 时 ， 美 观 是 设计 工作 的 首要 要 求 ， 设 计 者 可 以 通过 适当 的 图 形 组 合 与 色 
彩 搭配 来 修饰 界面 元 素 ， 增 加 移动 UI 的 观 贫 性 ， 为 用 户 带 来 更 好 的 视觉 感受 ， 如 图 3-18 


所 示 。 
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动物 知识 


该 图 为 一 个 电子 书 阅读 APP 主 
界面 ， 上 图 中 采用 白色 的 简单 
背景 ， 缺 乏 设计 感 ， 其 实 设计 
者 还 可 以 让 它 显得 更 加 美观 


动物 知识 最 


左 图 相对 于 上 图 而 言 ， 增 加 了 
一 张 背 景 图 像 ， 而 且 背 景 进行 
虚 化 处 理 ， 显 得 腹 胱 唯美 ， 让 
整个 界面 的 形式 感 更 美 ， 同 时 
也 很 符合 阅读 APP 的 意境 


图 3-18 增加 移动 UI 的 观 英 性 


3.2.8 ”实用 性 能 优化 oD| 


除了 用 美观 来 吸引 用 户外 ， 移 动 UI 还 必须 具备 一 定 的 实用 性 ， 要 不 然 就 成 为 一 个 “ 花 
架子 ”， 用 户 也 许 会 下 载 它 ， 但 下 载 后 发 现 并 不 实用 就 很 可 能 会 立即 凶 载 掉 。 

实用 性 主要 体现 在 以 下 几 个 方面 : 

e 是 否 能 为 用 户 带 来 较 好 的 操作 和 控制 体验 。 

e@ 重要 的 信息 在 界面 中 ， 是 否 能 得 到 直观 地 展示 。 

e APP 的 功能 设 定 是 否 向 单 明 了 。 

在 设计 移动 UI 的 过 程 中 , 设计 者 一 定 要 把 握 好 实用 性 的 要 点 , 避免 出 现 虚 有 其 表 的 情况 ， 
那样 是 很 难 留 住 用 户 的 ， 如 图 3-19 所 示 。 
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透析 木质 ， 医 
CLK 移动 UI 视觉 交互 设计 法 则 马 


左 图 是 一 个 手机 免费 WiFi 应 用 的 登录 界面 ， 
界面 的 色彩 非常 丰富 ， 而 且 功 能 表单 也 比较 
多 ， 但 其 中 的 色彩 运用 有 些 复 杂 ， 而 且 不 太 
合适 ， 明 显 属于 不 实用 的 界面 


免费 WiFi 


随时 随地 ， 自 由 上 网 ! 


相对 于 左上 图 而 言 ， 左 图 采用 了 蓝 色 系 作 为 
移动 UI 的 主 色 调 ， 并 通过 不 同 的 色彩 明度 


和 饱和 度 来 突显 信息 ， 让 用 户 一 目 了 然 即 可 
发 现 界面 中 的 重点 信息 ， 而 且 功 能 分 类 也 明 
显要 更 加 清晰 


图 3-19 把握 好 实用 性 的 要 点 


3.3 ” 精 葵 求 精 : 优化 移动 Ul 的 图 农 效果 


-二流 企业 造 产 品 ， 一 流 企业 创 品牌 ”。 在 消费 者 越 来 越 挑 易 、 可 替代 性 产品 越 来 越 多 
的 环境 下 ， 想 要 自己 的 产品 突出 重围 ， 就 必须 要 能 打动 人 心 。 优 秀 的 UI 设计 ， 能 够 在 第 一 
时 间 就 吸引 人 的 眼球 ， 本 布 将 讲解 如 何 优化 移动 UI 的 图 案 效 果 。 


3.3.1 ”分辨 率 影 响 美 感 | 


在 移动 UI 中， 图 片 的 品质 与 分 辩 率 有 很 大 的 关系 ， 较 高 的 分 辨 率 可 以 让 图 片 显得 更 加 
清晰 、 精 美 ， 能 够 体现 出 图 片 的 内 在 质感 ， 如 图 3-20 所 示 。 
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当然 ， 图 片 如 果 非 常 模糊 ， 品 质 较 差 ， 那么 肯定 会 影 啊 用 户 的 视 完 欣 贰 体验 ， 降 低 用 户 
对 APP 的 好 感 ， 如 图 3-21 所 示 。 


各 :2 @ 的 的 外 @@I 


是 ;直播 公告 : 放 诚 直 握 我 无 政 你 随意 


图 3-20 ”高 分 辨 率 图 像 图 3-21 低 分 辩 率 图 像 


3.3.2 ” 拉 伸 影响 美感 JU 


在 设计 移动 UI 中 的 图 像 时 ， 如 图 3-22 所 示 为 原 图 ， 如 果 随 意 拉 伸 图 片 则 会 造成 图 片 失 
真 变形 ， 如 图 3-23 所 示 ， 不 但 看 上 去 感觉 很 奇怪 ， 而 且 还 会 让 用 户 质 疑 APP 的 专业 性 。 


罗 辑 思维 


罗 腾 60 秒 : 为 什么 一 知 半 和 解 的 知识 
更 重要 ? 


罗 胖 60 秘 : 放大 尺度 , 就 是 认 知 升 ”| 


| 儿童 节 好 礼 | 学 艺术 说 美育 , 不 如 Ed < 


罗 胖 60 秒 : 放大 尺度 , 就 是 认 知 升 
级 


间 儿童 节 好 礼 | 学 艺术 说 美育 , 不 如 
了 从 先 动手 体验 


也 先 动手 体验 wr 
到 | ”新 书 首发 商城 用 户 服务 过] ”新 书 首发 商城 用 户 服务 
图 3-22 原 图 图 3-23 ”随意 拉 伸 的 图 片 


因此 ， 在 处 理 移动 UI 图 像 时 ， 应 该 按照 等 比 缩放 或 者 合理 裁剪 的 原则 来 控制 图 片 尺 寸 ， 
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避免 出 现 随意 拉 伸 的 情况 ， 保 持 图 像 的 真实 感 ， 如 图 3-24 所 示 ， 分 别 为 原 图 、 等 比 缩放 图 、 
合理 裁剪 图 。 


-看 > 加 
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图 3-24 原 图 、 等 比 缩放 图 、 合 理 裁剪 图 


3.3.3 ”特效 美化 界面 | 


在 移动 UI 中 应 用 各 种 素材 图 像 时 , 设计 者 可 以 适当 地 对 图 片 进行 一 定 的 色彩 或 特效 处 理 ， 
使 其 在 移动 UI 中 的 展示 效果 更 佳 ， 为 用 户 带 来 更 好 的 视觉 体验 。 
使 用 Photoshop 调整 图 像 透 明度 、 混 合 模式 或 者 虚 化 图 像 等 ， 都 是 一 些 不 错 的 移动 UI 图 
像 处 理 方式 ， 可 以 突出 移动 UI 中 的 重点 信息 ， 使 APP 界面 的 层次 感 更 强 ， 如 图 3-25 所 示 ， 
分 别 为 原 图 、 调 节 透 明度 图 、 模 糊 虚 化 效果 图 。 


及 潭 同 宫 “网 淹 同 镍 “ 凡 洒 同 半 
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图 3-25 ” 原 图 、 调 节 透 明度 图 、 模 糊 虚 化 效果 图 
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3.3.4 ”交互 动作 特性 电 


如 今 ， 触 摸 屏 已 经 成 为 移动 智能 设备 的 标 配 ， 多 点 触 控 手 势 技 术 也 被 广泛 应 用 ， 智 能 手 
机 的 APP UI 设计 中 ， 最 重要 的 特性 就 是 手势 交互 动作 特性 ， 用 户 可 以 通过 模拟 真实 世界 的 
手势 与 手机 屏幕 上 的 各 种 元 素 进 行 互 动 ， 进 一 步 增 加 了 人 机 交互 的 体验 。 如 图 3-26 所 示 为 一 
些 第 见 的 手势 交互 操作 。 


手指 短 时 间 使 用 
一 定 的 速度 向 前 
融 动 


图 3-26 ”常见 的 手势 交互 操作 
例如 ， 手 势 交 互 特性 中 的 自然 手势 就 是 在 真实 物理 世界 中 存在 或 演绎 而 来 的 手势 。 这 类 
手势 的 动作 十 分 自然 ， 用 户 基本 不 需要 或 很 少 需 要 去 学 习 。 如 图 3-27 所 示 为 钢铁 侠 系 列 电影 
中 的 全 息 触 控 交互 。 


图 3-27 全 息 触 控 交互 


3.3.5 ”增加 真实 感 oD| 


在 APP UI 设计 中 ， 人 循环 动作 原则 主要 是 指 一 个 UI 元 素 的 运动 频率 。 例 如 ， 在 图 3-28 所 
示 的 这 款 游戏 APP 界面 中 ,赛车 一 直 处 于 旋转 的 循环 运动 中 , 可 以 向 用 户 360” 地 展示 其 特点 。 

对 于 那些 运动 频率 很 小 的 UI 元 素来 说 ， 在 设计 时 可 以 通过 数据 精确 地 将 其 描述 出 来 ， 
可 以 让 APP 中 的 动画 效果 看 起 来 更 加 真实 。 
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3.3.6 ”透析 事物 关系 VY 


从 APP 的 体验 设计 层面 来 说 ,设计 者 必须 考虑 多 个 UI 元 素 动 作 的 重复 运用 及 循环 速率 ， 
以 此 来 解释 各 个 UI 元 素 之 间 的 关系 ， 并 省 下 大 量 的 设计 工作 。 

例如 ， 在 如 图 3-29 所 示 这 款 游戏 APP 界面 中 ， 用 户 操 击 赛车 即 可 查看 其 具体 的 参数 ， 
但 赛车 的 循环 运动 动作 还 是 在 重复 不 变 。 
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图 3-29 ”在 不 同 界面 中 重复 运用 同一 个 UI 元素 
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3.3.7 展现 复杂 效果 | 

在 移动 UI 设计 中 ， 大 部 分 的 动画 和 运动 特效 都 可 以 运用 关键 动作 进行 绘制 。 例 如 ，“ 易 
企 秀 ”APP 就 是 运用 关键 动作 方法 进行 绘制 的 ， 用 户 可 以 通过 将 多 种 不 同 素 材 进行 结合 ， 从 
而 达到 自己 想 要 的 效果 ， 如 图 3-30 所 示 。 


图 3-30 ”“ 易 企 秀 ”APP UI 


关键 动作 主要 是 将 一 个 动作 拆 解 成 一 些 重要 的 定格 动作 ， 通 过 补 间 动 画 来 产生 动态 的 效 
果 ， 可 以 适用 于 较 复 杂 的 动作 ， 如 图 3-31 所 示 。 


THE WoONWTH OFf SUM ME Rn &] THE WoOWTH OF SUMMERS KY 
MM (2% 
no La 


图 3-31 APP 中 的 天 键 动 作 
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3.3.8 ”展现 人 简单 动画 JU 


连续 动作 是 指 将 动作 从 第 一 张 开 始 ， 依 照 顺序 画 到 最 后 一 张 ， 通 稼 是 制作 较 向 易 的 动态 
效果 。 例 如 ，“ 水 有 果 忍 者 ”APP 就 是 采用 连续 动作 原则 来 描述 运动 轨迹 ， 如 图 3-32 所 示 。 


图 3-32 “水 果 忍 者 ”游戏 APP UI 


3.3.9 ”实现 夸张 想象 JW 
移动 UI 动画 的 最 大 乐趣 就 是 在 于 设计 者 可 以 充分 发 挥 天 马 行 空 的 想象 力 和 创造 力 ， 利 
用 区 张 的 方式 制作 利于 触 碰 的 UI 元素， 如 图 3-33 所 示 。 


| 


Speed Test 


图 中 APP 的 进度 条 与 汽车 油 表 指 


示 灯 十 分 神似 ， 创 意 性 很 强 


ashboard 


图 3-33 用 汽车 油 表 指 示 灯 作为 APP 的 进度 条 
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4.1 专注 体验 : 车 握 基 本 元 紊 的 设计 技巧 


无 论 移动 客户 端的 目标 是 什么 ， 了 解 移动 UI 设计 技巧 是 企业 APP 走向 成 功 的 第 一 步 。 
随 着 APP 应 用 软件 的 发 展 ， 目 前 网 络 上 涌现 出 了 很 多 实用 的 设计 技巧 ， 但 信息 过 于 或 杂 。 不 
管 设 计 者 是 制作 一 个 整体 的 APP, 还 是 对 已 有 APP 进行 升级 改进 , 或 者 是 增加 一 些 功能 元 素 ， 
都 需要 掌 担 一 些 基本 的 设计 技巧 。 下 面 从 企业 APP 的 设计 角度 出 发 ， 有 针对 性 地 对 7 个 设计 


技巧 进行 全 面 分 析 。 
4.1.1 用户 体 验 oO 


用 户 体验 是 指 用 户 在 使 用 产品 的 过 程 中 建立 起 来 的 感受 ， 是 在 以 用 户 为 中 心 、 以 人 为 本 
的 APP 设计 中 尤其 需要 被 注意 的 。 一 般 情况 下 ， 用 户 体验 包括 使 用 APP 之 前 、 使 用 期 间 和 
使 用 之 后 的 全 部 感受 ， 主 要 集中 于 如 图 4-1 所 示 的 8 个 方面 。 


用 户 情感 


图 4-1 用 户 感 受 
用 户 体验 越 好 的 企业 移动 UI， 自 然 能 够 提升 用 户 眼中 的 企业 形象 。 需 要 注意 的 是 ， 并 不 
是 越 复杂 ， 功 能 越 强大 的 APP 就 会 被 认可 。 
如 图 4-2 所 示 ， 为 药品 行业 某 公司 的 APP， 其 主要 功能 只 有 医院 咨询 与 预约 两 项 ， 通 过 
这 两 项 功能 提升 用 户 的 体验 ， 从 而 获得 用 户 好 感 。 


图 4-2 ”医药 APP 


深入 解析 
SA 5 
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4.1.2 模糊 背景 


模糊 背景 也 被 称 为 背景 虚 化 ， 在 移动 UI 设计 中 十 分 常见 ， 往 往 是 作为 一 个 配角 存在 。 


从 实用 角度 出 发 ， 主 要 有 整体 背景 模糊 设计 和 局 部 背景 模糊 设计 两 种 方式 ， 但 是 其 所 起 的 作 
用 是 一 致 的 ， 主 要 有 以 下 几 个 方面 ， 如 图 4-3 所 示 。 


展示 设计 细节 ， 体 现 作 品 原 有 的 美感 


突出 重点 信息 ， 有 效 地 提高 可 读 性 


文字 辨识 度 强 ， 小 字体 也 会 清晰 易 读 


线条 与 背景 融合 ， 使 画面 看 起 来 和 谐 、 精 致 


图 4-3 ”背景 设计 


模糊 背景 常常 被 运用 于 设计 移动 UI 的 登录 界面 ， 用 来 突出 界面 的 登录 框 形象 ， 如 图 4-4 
所 示 。 


图 4-4 模糊 背景 


在 部 分 移动 UI 中 ， 除 了 登录 界面 使 用 模糊 背景 之 外 ， 也 会 在 软件 功能 界面 采用 模糊 


背景 来 突出 文字 内 容 ， 但 这 种 形式 主要 应 用 在 功能 简单 或 者 表现 形式 简单 的 APP 中 ， 功 
能 较 复 杂 的 APP 不 宜 采 用 。 
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4.1.3 滚动 模式 | 


在 移动 UI 中 ， 由 于 移动 端 界面 的 局 了 上限， 往往 很 难 直 接 体现 出 更 多 的 元 素 ， 所 以 在 设计 
移动 UI 时 , 设计 人 员 就 借鉴 PC 端的 模式 ， 增 加 了 界面 滚动 的 功能 ， 其 模式 的 相关 内 容 分 析 ， 
如 图 4-5 所 示 。 


表现 形式 


功能 指针 界面 滚动 功能 


使 用 形式 


使 用 户 可 以 获得 超出 屏幕 边界 的 内 容 ， 
能 够 在 同一 界面 中 直接 查看 更 多 信息 
图 4-5 ”界面 滚动 功能 
以 微 信 APP 的 “订阅 号 ”为 例 ， 在 订阅 号 的 界面 中 每 次 只 能 显示 9 个 订阅 号 内 容 ， 但 用 
户 可 以 使 用 手指 上 下 请 动 屏 幕 来 切换 查看 更 多 订阅 号 内 容 ， 如 图 4-6 所 示 。 
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图 4-6 微 信 APP UI 


4.1.4 ”色调 搭配 D 


简约 的 模式 已 经 成 为 流行 的 移动 UI 设计 理念 ， 相 比 于 过 去 闪烁 的 赵 虹 色 搭 配 ， 整 洁 和 
干净 更 能 够 获得 现在 用 户 的 青睐 。 在 移动 UI 设计 中 , 主要 有 3 种 配色 技巧 可 供 选 择 ， 如 图 4-7 
所 未。 
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内 容 
APP 设计 中 的 配色 技巧 ”Id 采 物 法 延伸 
吸 色 法 借用 


4-7 APP 设计 配色 技巧 
在 移动 UI 的 基本 元 素 设 计 中 ， 选 择 统一 的 色 系 能 够 给 用 户 留 下 深刻 的 印象 ， 通 过 单 色 
延伸 的 方法 使 整个 移动 UI 保持 色 系 上 的 稳定 性 。 一 般 情况 下 ， 为 了 防止 过 于 单调 ， 单 色调 
铺垫 的 方式 中 会 采用 小 面积 的 辅助 色 ， 以 提升 界面 层次 感 。 
采 物 法 延伸 主要 是 指 采 用 画面 内 物体 的 色彩 作为 配色 的 基础 ， 并 将 这 种 色彩 延伸 至 整个 
画面 。 在 实际 应 用 中 ， 主 要 是 采用 画面 主体 或 背景 的 色彩 。 
如 图 4-8 所 示 为 单 色 与 辅助 色 并 存 的 界面 ， 即 以 白色 为 铺垫 单 色 , 以 粉红 色 作 为 辅助 色 。 
如 图 4-9 所 示 为 采用 画面 背景 或 文字 背景 的 色彩 作为 配色 基础 的 界面 ， 设 计 者 可 采用 画面 背 
景 的 粉红 色 或 文字 背景 的 黄色 作为 配色 的 基础 。 


些 东 西 还 在 用 ， 可 其 实 并 


在 线 预 约 a 


AAA/ 


秀美 甲 扫 优质 商户 倾情 限时 推出 


。 郁 美甲 为 秀 而 生 。 


图 4-8 音色 与 辅助 色 并 存 图 4-9 采用 画面 背景 或 文字 背景 的 色彩 作为 配色 基础 


“ 吸 色 法 借用 ”主要 是 从 别人 的 优秀 作品 中 将 色彩 通过 工具 进行 吸收 ， 用 于 自己 的 设计 
稿 中 。 这 种 方式 门槛 很 低 ， 实 用 性 较 强 ， 但 需要 注意 色彩 的 比例 ， 不 宜 作 用 于 大 范围 的 背景 ， 
往往 只 适用 于 局 部 的 色彩 设计 。 


4.1.5 ”情景 感知 | 

随 着 智能 手机 和 可 穿戴 设备 应 用 软件 的 功能 进一步 加 强 ， 情 景 感知 的 需求 成 为 移动 UI 
设计 中 的 重要 考虑 因素 。 情 景 感知 是 一 种 智能 化 的 功能 元 素 ， 目 前 已 经 普遍 运用 于 智能 家 居 、 
办 公 、 精 准 农业 等 方面 ， 如 图 4-10 所 示 为 情景 感知 的 模式 和 作用 分 析 。 
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设备 主动 收集 附近 信息 


分 析 用 户 所 处 环境 


识别 用 户 语 言 或 手势 


预见 性 的 做 出 相应 准备 


图 4-10 ”软件 情景 感知 
随 着 大 众 对 情景 感知 模式 的 需求 增加 ， 智 能 化 成 为 未 来 的 移动 UI 设计 的 主流 ， 市 场 上 
出 现 了 很 多 以 用 户 为 中 心 的 情景 感知 移动 应 用 。 如 图 4-11 所 示 ， 即 为 智能 家 居 领 域 的 智能 型 
APP， 提 供 主 动 与 自动 两 种 操作 方式 : 在 设计 左 图 中 的 移动 UI 时 ,设计 者 大 胆 地 模拟 了 实际 
的 空调 操作 界面 ， 如 显示 屏 、 减 低温 度 、 增 加 温度 、 自 动 、 开 局 等 按钮 元 素 ， 让 用 户 可 以 快 
速 上 手 。 


admin 


图 4-11 智能 家 居 领 域 的 智能 型 APP UI 
情景 感知 除了 应 用 于 智能 家 居 领 域 之 外 , 在 其 他 行业 中 也 被 广泛 采用 , 部 分 案例 如 图 4-12 
所 示 。 


根据 游客 的 位 置 进行 景点 推荐 、 路 线 导 游 
根据 顾客 的 位 置 进行 商品 推荐 以 及 路 线 指 导 等 


根据 食客 的 位 置 提供 周边 餐馆 的 菜品 展示 等 


图 4-12 智能 家 居 领 域 的 智能 型 APP UI 


深入 解析 鼎 
A 移动 UI 的 构成 元 素 


4.1.6 ” 拟 物 设计 


苹果 手机 的 软件 设计 风格 一 直 以 来 由 乔布斯 主导 ， 而 他 对 于 UI 设计 方面 所 推崇 的 就 是 
拟 物 设计 ， 这 种 设计 方式 直到 乔布斯 去 世 之 后 才 被 改 为 局 平 化 UI 设计 ,但 拟 物 设计 仍然 存 
在 于 诸多 行业 的 软件 设计 中 ， 如 图 4-13 所 示 。 


CG 


图 4-13 ” 拟 物 设计 主题 分 析 
关于 拟 物 设计 主题 的 相关 分 析 如 图 4-14 所 示 。 


创新 与 原始 的 
人 磁 撞 


原 有 形式 存在 落后 性 


沁 原 有 轮廓 


所 原 有 图 标 | 新 设计 还 模仿 旧 形 式 
吕 原 有 导航 


吕 原 有 构图 口 熟 悉 度 强 


新 的 外 观 体现 亲切 感 忆 认 可 度 强 
吕 品 牌 效应 强 


4-14 ” 拟 物 设计 主题 分 析 
拟 物 设计 除了 在 移动 UI 主题 元 素 上 的 体现 之 外 ， 在 具体 的 表现 中 主要 是 指 一 种 产品 设 
计 的 元 素 或 自身 风格 ， 下 面 从 4 个 方面 对 拟 物 设计 进行 深入 认识 ， 如 图 4-15 所 示 。 
例如 ， 在 读书 类 APP 移动 UI 中， 第 第 采用 书柜 或 原木 背景 的 方式 进行 拟 物 设计 ， 为 阅 
读者 创造 良好 的 阅读 环境 。 如 图 4-16 所 示 ， 为 敬 赔 APP 的 相关 界面 。 
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对 真实 物体 的 质感 、 细 节 等 方面 进行 模仿 


联系 用 户 与 软件 ， 对 真实 的 交互 方式 进行 模仿 
直接 效果 传达 丰富 的 人 性 化 氛围 ， 体 现 温 巷 感 
功能 设计 存在 一 定 的 局 限 性 ， 无 法 展示 全 面 功能 


图 4-15 产品 元 素 风格 


ee EE 353 
0 未 进入 排名 


门 我 的 消息 

@， 充值 送 阅 饼 

日 人 手 一 本 阅读 器 
号 掌 阅 纸 书 

88 签到 /任务 

日 今日 免费 

QP” 活动 中 心 


站 ee 
四 游戏 中 心 


图 4-16 掌 阅 APP 的 相关 UI 


4.1.7 ”简洁 提示 | 
大 部 分 移动 UI 的 设计 者 都 十 分 明白 软件 升级 的 必要 性 ， 这 对 于 APP 本 身 而 言 不 仅仅 是 
功能 上 的 升级 ， 也 是 利用 升级 再 一 次 对 用 户 造 成 存在 感 影 啊 。 对 于 用 户 而 言 ， 过 于 频 或 的 
APP 升级 往往 会 带 来 心理 上 的 反感 ， 因 此 APP 本 身 拥有 一 个 简洁 的 升级 提示 界面 十 分 重要 。 
如 图 4-17 所 示 为 “EC 模板 堂 ”的 APP 升级 提示 ， 该 提示 以 人 简洁 的 文字 、 相 关 的 序列 全 
面 地 将 更 新 内 容 表 达 出 来 。 
除了 软件 内 置 的 升级 提示 之 外 ， 还 有 一 种 方式 就 是 在 应 用 商城 中 可 以 直接 升级 软件 ， 用 
户 也 可 以 通过 应 用 商城 对 软件 升级 的 内 容 进行 查看 。 
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EC 模板 和 营 


发 现 新 版 本 全 新 界面 从 心 出 发 
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最 新 版 本 : 2.2.0 
新 版 本 大 小 : 5.61M 


更 新 内 容 ECSHOP 模 板 Ee SC HOP GECY 
1、 新 增 搜索 界面 及 保存 搜索 历史 功能 大 六 未 20HH&IE 国生 让 二 三 
2” 修 复 二 维 码 扫描 的 屏幕 适 配 问题 ECSC ” 有 
3、 俱 复 使 用 WAP 支 付 宝 会 出 现 闪 退 的 问 ¥23000 元 

4、 优 化 搜索 框 样式 和 014 

5、 优 化 首页 左 滑 菜单 网 最 强 旗舰 

6、 优 化 商品 大 图 页 面 ， 实 现 单 击 返 回 


¥5500 元 


ECSHOP 免 费 模板 


图 4-17 “EC 模板 对 ”的 APP 升级 提示 界面 


4.2 对 点 切入 : 灵活 的 市 入 情感 元 紊 


感情 是 一 种 很 微妙 的 东西 ， 使 用 感情 进行 营销 可 以 吸引 那些 比较 感性 的 消费 者 。 

设计 者 可 以 在 移动 UI 中 添加 一 些 充满 情感 的 话语 或 者 图 片 ， 把 用 户 的 个 人 情感 差异 和 
需求 作为 APP 的 核心 功能 ， 在 包装 、 促 销 、 广 告 等 界面 中 加 入 情感 ， 使 设计 更 为 人 性 化 ， 如 
图 4-18 所 示 。 


-| OO®@ P1426 B17% 10:56 四， 加 多 5 9342G4d B17% 10:56 


跳 过 > 


怀孕 必 备 她 她 图 
280 天 ， 天 天 不 一 样 聆听 与 被 聆听 的 世界 


Fo + 
-人 内 家 


地 


加 妈妈 变化 
B 超 单 解读 


OO@C 开始 体验 加 


图 4-18 ”市 入 情感 元 素 


当 一 个 用 户 对 APP 产生 一 定 的 感情 时 ， 就 说 明 APP 的 内 容 走 进 了 用 户 的 心里 ， 而 不 仅 
仅 是 APP 的 营销 推广 取得 了 何等 的 成 效 。 要 想 让 用 户 从 根本 上 认可 APP， 不 是 简单 依靠 技术 


ee 
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性 的 营销 推广 就 可 以 的 。 
走 进 用 户 心 里 的 APP 内 容 模 式 ， 主 要 从 3 个 方面 进行 分 析 ， 如 图 4-19 所 示 。 


情感 是 走 进 用 户 的 切入 所 


走 进 用 户 心 里 的 内 容 模式 惊喜 能 拉 近 和 用 户 的 距离 


真实 可 以 帮助 用 户 更 认可 


图 4-19 走 进 用 尸 心里 的 APP 内 容 模式 


4.2.1 情感 切入 扣 | 


回顾 账单 往往 能 够 让 老 用 户 对 APP 软件 产生 很 强 的 归属 感 ， 无论 账单 内 容 是 文字 、 文 草 、 
图 像 还 是 资金 。 因 此 ， 很 多 上 线 时 间 较 长 期 ， 有 一 定 影响 力 的 APP 都 会 选择 用 这 种 方式 ， 再 
结合 其 他 活动 ， 进 一 步 打造 营销 效果 。 以 “淘宝 ”APP 推出 的 “3 万 亿 感 谢 有 你 ”活动 为 例 ， 
阿里 巴巴 交易 额 创造 了 一 个 新 的 3 万 亿 历 史 ，“ 淘 宝 ”APP 顺势 推出 用 户 账单 回顾 查询 活动 ， 
如 图 4-20 所 示 。 


《 返 加 分 于 这 个 简单 的 活动 界面 
引发 了 大 量 用 户 的 参 
与 ， 并 且 随 着 用 户 的 
自主 宣传 进一步 扩大 
影响 力 。 这 种 账单 回 


顾 就 是 让 用 户 在 有 闪 
趣 的 基础 上 玩 得 更 舒 
心 ， 同 时 乐于 分 享 ， 
这 也 是 利用 用 户 情感 
建立 APP 品牌 的 一 种 
方式 。 


图 4-20 “账单 查询 ”活动 界面 


4.2.2 ”惊喜 拉 近 距离 JW 
“ 斗 鱼 直播 ”时 第 推出 活动 ， 而 其 中 较 好 的 一 个 广告 海报 创意 就 是 来 自 “ 斗 鱼 进 年 华 ， 
等 你 来 史 ” 活 动 ，APP 通过 精准 的 文案 为 用 户 提供 准确 的 信息 。 如 图 4-21 所 示 ， 为 “ 斗 鱼 直 
播 ”APP 推出 的 “ 斗 鱼 亮 年 华 , 等 你 来 嗨 ”活动 的 相关 宣传 海报 。 这 个 活动 的 推出 时 间 为 春季 ， 
适当 的 时 间 搭 配 充 满 活力 的 UI 文字 所 营造 的 效果 是 相当 惊人 的 。 这 种 宣传 方式 打动 了 用 户 ， 
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更 进一步 提升 了 “ 斗 鱼 直 播 ”APP 的 产品 。 


图 4-21 “ 斗 鱼 嘉 年 华 ， 等 你 来 唾 ”活动 界面 


4.2.3 ”真实 获得 认可 电 


在 网 络 时 代 ， 文 字 的 真实 性 越 来 越 受到 怀疑 ， 而 主打 真实 声音 的 APP 却 开始 流行 起 来 。 
一 个 标榜 微 博 式 电台 的 名 为 “喜马拉雅 EM 的 APP 吸引 了 数 亿 人 的 目光 ， 其 所 依靠 的 就 是 
真实 的 声音 。 

为 了 进一步 让 用 户 认可 该 APP，“ 吝 马 拉 雅 FM” 推出 了 微 博 主题 活动 “对 1.2 亿 人 说 ” 
相关 界面 ， 如 图 4-22 所 示 。 


抢 鲜 5 : 
”黑马 余 枫 
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图 4-22 “喜马拉雅 FM” 的 APP 相关 宣传 海报 界面 


eg 


，， 国 


Photoshop™— = pp 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


一 个 以 用 户 为 中 心 的 微 博 主题 活动 吸引 了 3500 万 人 次 的 阅读 量 ， 充 分 体现 了 用 户 对 于 真 
实 声音 的 渴望 。 另 外 ， 从 APP 的 定位 而 言 ，“ 喜 马 拉 雅 FM” 就 较为 成 功 ， 它 为 用 户 提 供 了 
有 声 小 说 、 相 声 评 书 、 新 闻 、 音 乐 、 脱 口 秀 、 段 子 笑话 、 甘 语 、 儿 歌 、 儿 童 故 事 等 多 方面 内 容 ， 
满足 了 不 同 用 户 群体 的 需求 。 


4.3 组 件 解 析 : 熟知 移动 Ul 的 按钮 组 件 


组 件 即将 一 段 或 几 段 完成 各 自 功 能 的 代码 段 封 装 为 一 个 或 儿 个 独立 的 部 分 。 用 户 界 
面 组 件 包含 了 这 样 一 个 或 几 个 具有 各 自 功 能 的 代码 段 ， 最 终 完 成 了 用 户 界面 的 表示 。 组 件 化 ， 
旨 在 让 用 户 自由 组 合 原生 列表 ， 令 模块 内 容 的 布局 排版 更 加 多 样 。 通 过 对 组 件 的 搭配 使 用 ， 
您 可 以 将 “幻灯 片 ”“ 左 右 图 ”“ 大 图 加 文字 ”“ 混 合 ” 这 四 种 列表 样式 随机 组 合 到 同一 个 
栏目 界面 中 。 本 布 将 讲解 UI 的 一 些 第 见 组 件 。 


4.3.1 常规 按钮 设计 JU 


在 移动 UI 中 ， 篆 规 按钮 是 指 可 以 啊 应 用 户 手 指点 击 的 各 种 文字 和 图 形 。 这 些 第 规 按钮 
的 作用 是 对 用 户 的 手指 点 击 做 出 反应 并 触发 相应 的 事件 。 

第 规 按 钮 Button) 的 风格 可 以 很 不 一 样 ， 上 面 可 以 是 文字 也 可 以 是 图 像 ， 但 它们 最 终 都 
要 用 于 确认 、 提 交 等 功能 的 实现 ， 如 图 4-23 所 示 。 


关闭 注册 
@ 
手机 号 或 者 邮箱 
密码 
当前 为 多 帐号 , 退出 此 帐号 将 自动 切换 
到 下 一 帐号 。 
3 
登录 按钮 取消 m 定 ”| 国生 确定 按钮 
登录 遇 到 问题 ? SEE 


图 4-23 ”登录 与 确定 按钮 的 样式 
通常 情况 下 ， 按 钮 要 和 APP 品牌 保持 统一 的 颜色 和 视觉 风格 ， 在 设计 时 可 以 从 品牌 
Logo 中 借鉴 形状 、 材 质 和 风格 等 。 
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4.3.2 编辑 输入 框 设计 OY 
编辑 输入 框 (Edit Text), 是 指 能 够 对 文本 内 容 进行 编辑 修改 的 文本 框 , 第 第 被 使 用 在 登录 、 
注册 、 搜 索 等 界面 中 ， 如 图 4-24 所 示 。 


账号 与 密码 输入 框 


图 4-24 账号 密码 样式 输入 框 与 搜索 框 样式 


4.3.3 ”开关 按钮 设计 | 


Ww/ 


开关 按钮 (Toggle Button) 可 更 改 APP 的 设置 状态 。 通 常情 况 下 打开 时 显示 彩色 ( 绿色、 
黄色 )， 关 闭 时 则 为 灰色 。 同 样 ， 开 关 按 钮 也 可 以 根据 APP 进行 个 性 化 设置 ， 如 图 4-25 所 示 。 


设置 选项 新 消息 提醒 
系统 设置 
和 接收 新 消息 通知 | © 


硬件 解码 
接收 语音 和 视频 通话 邀请 通知 | @ 


3G/4G 自 动 播放 视频 


公主 3G/4G 上传 闹 关 通知 显示 消息 详情 ' ©@, 
人 允许 3G/4G 下 载 

9》 消息 设置 声音 | @ 
新 消息 设置 新 消息 提示 音 io 
绩 动 OB 
CD) 播放 器 设置 

pt | 


悬浮 播放 
辐 弹 幕 设置 


图 4-25 各 种 开关 按钮 的 样式 
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4.3.4 ”浏览 模式 设计 OD 


网 格式 浏览 (Grid View)， 图 标 至 网 格式 排列 。 在 导航 菜单 过 多 时 推荐 使 用 此 种 方式 ， 且 
图 标的 表现 形式 较 列 表 更 为 直观 ， 如 图 4-26 所 示 。 


,…… 
| 省 4 | 


园 百度 ” 回 风 且 回 腾 讯 国 搜 狐 

必 备 网 站 ; ”热门 生活 休闲 查询 服务 
贺 新 浪 图 网 易 “ 周 房 天 下 贺 免 费 下 一 -一 

(新 间 ) 百度 腾讯 ”环球 央视 ~ 
图 苏宁 58 同城” 国 直 集 网 加 携程 

起 点 言情 ” 泽 湘 17K 小 说 ~ 
露天 猎 ”四 京东 园 汐 宝 优酷 网 


NBA 新 浪 搜狐 直播 吧 ~ 


爱 卡 汽车 ”去 哪儿 ” 看 小 说 ”4399 游 戏 ”东方 财富 铁血 米尔 ”新 军事 复兴 ~ 
易 车 安居 客 ”热门 游戏 ”世纪 佳缘 小 游戏 东方 新 浪 ”理财 和 讯 ~ 
唯 品 会 NBA 双色 球 亚马逊 斗 鱼 TV 贴吧 新闻 图 片 地 图 ~ 


打工 不 如 开店 当 老 板 ”女子 喝 醉 被 捡 全 程 
介 颈 军事 生活 社会 娱乐 小 说 
必 备 网 站 ;” 热门 生活 休闲 查询 服务 ka 


全 世界 都 在 关注 这 件 大 事 ! 厉害 了 ， 中 
百度 “腾讯 ”环球 央视 ~ + 
起 点 言情 潇 酒 17K 小 说 ~ 
NBA ”新 浪 ”搜狐 ”直播 吧 、 


《 > OO 0 … 《 》 沼 吕 问 


图 4-26 网 格式 浏览 


4.3.5 文本 标签 设计 oD| 


文本 标签 (UI Label) 也 是 文本 显示 的 一 种 形式 ， 这 里 的 文本 是 只 读 文本 ， 不 能 进行 文字 
编辑 ， 但 可 以 通过 设置 视图 属性 为 标签 选择 颜色 、 字 体 和 字号 等 ， 如 图 4-27 所 示 。 


一 键 登 录 ， 领 取 积 分 大 奖 


二 已 购 

疝 红包 /活动 

车 免 流 量 看 新 闻 
巴 备份 腾讯 新 闻 。 
乙 投诉 反馈 


轩 设置 


问 
© 
加 
"@ 


4-27 文本 标签 
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4.3.6 ”警告 框 设计 时 


警告 框 (UI Alert View 与 UI Action Sheeb 是 附带 有 一 组 选项 按钮 供 选 择 的 组 合 组 件 。UI 
Alert View 与 UI Action Sheet 这 两 者 的 区 别 在 于 ， 前 者 最 多 只 文 持 3 个 选项 ， 而 后 者 则 支持 
超过 3 个 的 选项 ， 如 图 4-28 所 示 。 


图 4-28 ”警告 框 


4.3.7 “导航 栏 设计 时 


通 第 情况 下 ，APP 主体 中 的 功能 列表 被 称 为 “导航 栏 ”。 顶 部 导航 栏 一 般 由 两 个 操作 按 
钮 和 APP 名 称 组 成 ， 左 边 的 按钮 一 般 用 于 返回 、 取 消 等 操作 ， 夺 侧 的 按钮 则 是 具有 搜索 、 添 
加 等 作用 ， 如 图 4-29 所 示 “ 微 信 ” 公 众 平台 的 顶部 导航 栏 与 导航 栏 菜单 。 


A A 
B 
LAA] AA 收 款 C 
D 
C E 
SS 测试 次 G 


WE 全 
长 沙 长 沙 全 攻略 


已 滴 滴 出 行 


GO 饿 了 么 网 上 订餐 


= 并 es” ezShare 易 享 派 


H 
人 有 各 时 
黑 岩 阅读 
# 


4-29 ”顶部 导 般 栏 与 导航 栏 菜单 


一 


有 
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在 进行 移动 UI 设计 时 ， 必 须 以 用 户 为 中 心 ， 设 计 由 用 户 控 制 的 界面 ， 而 不 是 界面 控 
制 用 户 ， 在 设计 导航 栏 时 也 要 遵守 这 个 原则 。 


4.3.8 ”页 面 切换 设计 | 


页 面 切换 (UI Tab Bar Controller) 栏 是 指 在 APP 页 面 底部 用 于 不 同 页 面 切换 的 组 件 。 例 如 ， 
在 “360 手机 助手 ”APP 的 底部 ， 就 有 “推荐 ”“ 游 戏 ” “软件 ”“ 应 用 圈 ” 以 及 “管理 ”5 
个 用 于 页 面 切换 的 组 件 ， 如 图 4-30 所 示 。 


侈 四国 多 中 © D204 让 28% 12:38 


四 ev 


一 I sie ~ 
i 
| oe 
- i ease 


【爆笑 】 看 网 友 们 如 何 讽刺 三 星 Note7 爆 炸 事 .… 


AN p>、 ed 一 一 
热门 新 游 崇 … 3 利 颜 值 超 高 主 . 新 型 号 手机 Note7 的 爆炸 事件 一 定 要 现在 城中 热门 话题 之 一 ， 而 
冠 绝 三 国 不 负 王 名 电眼 美女 好 会 撩 平常 很 有 才华 的 网 友 们 怎 能 错过 如 此 好 的 机 会 ? ! 于 是 网 络 . 


超 值 游戏 活 .… 狂 送 现金 红 .. sg 搞笑 @208 向 贰 


来 为 TA 选 个 礼物 .. 众多 福利 等 你 享 


头条 视频 
>| 67 万 人 在 用 10.9M 


个 性 化 推荐 海量 视频 ， 搞 笑 豆 起 精品 短片 


御 剑 红尘 警报 : 不 注意 就 怀 不 上 了 ! 
> 二 2 万 人 在 玩 。 276M 造成 不 孕 的 几 大 原因 你 一 定 要 知道 ， 看 过 原因 我 沉默 了 ， 女 生 
SN 新 派 刊 美 回合 手 游 重 返 盛 世 大 让 请 爱惜 自己 
女性 健康 © 582 自 1 


Ed DY dd 
鱼 加 团 守 全 局 
软件 应 用 图 管理 推荐 游戏 软件 


图 4-30 “360 手机 助手 ”APP 页 面 切换 组 件 


4.3.9 进度 条 设计 JU 


手机 系统 或 APP 在 处 理 某 些 任务 时 ， 会 实时 地 以 图 片 形式 显示 处 理 任 务 的 速度 、 完 成 进 
度 和 剩余 未 完成 任务 量 的 大 小 ， 以 及 可 能 需要 的 处 理 时 间 ， 一 般 以 长 方形 条 状 显示 ， 这 被 称 
为 “进度 条 ”， 如 图 4-31 所 示 。 

当然 , 设计 者 也 可 以 充分 发 挥 创意 , 制作 出 一 些 特 殊 的 进度 条 效果 , 如 圆 形 、 圆 角 和 矩形 等 ， 
如 图 4-32 所 示 。 
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图 4-31 进度 条 


图 4-32 特殊 的 进度 条 效果 


4.3.10 ico 图 标 设计 OY 

lco 是 手机 系统 或 APP 的 一 种 图 标 格 式 ， 扩 展 名 为 *.icon、*.ico。i1co 图 标 是 一 款 APP 种 

给 用 户 的 首要 印象 ， 因 此 设计 者 必须 重视 ico 图 标 ， 好 看 的 ico 图 标 更 容易 吸引 用 户 的 关注 与 
下 载 ， 如 图 4-33 所 示 。 


图 4-33 ”好 看 的 ico 图 标 


Ea 


学习 提示 


Phoroshop CC 是 目前 世界 上 非常 优秀 的 图 像 处 理 软件 ， 掌 握 该 软件 的 一 些 
基本 操作 ， 可 以 为 学 习 Phoroshop 移动 UI 设计 打下 坚实 的 基础 。 本 章 将 问 读 者 
介绍 Phoroshop CC 的 一 些 基础 操作 ， 主 要 包括 图 像 文件 常用 操作 、 窗 口 显示 的 
基本 设置 以 及 调整 图 像 显 示 等 内 容 。 


本 章 重 点 导航 


© 〇 位 图 与 矢量 图 

@ Phoroshop 3 @ 像素 与 分 辨认 

@ 菜单 栏 @ 图 像 颜色 模式 

@ 状态 栏 @ 储存 文件 格式 

@ 工具 属性 柱 @ 新 建 空 日 图 像 文件 
@ 工具 箱 打开 UI 图像 文件 
@ 图 像 编辑 窗口 @ 保存 UI 图 像 文件 
@ 浮动 控制 面板 @ 关闭 UI 图 像 文件 


全 场 商品 。 起 
购物 “，' 返 现 
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5.1 快速 上 手 : Photoshop 移动 U1 安装 与 和 卸载 


用 户 学 习 软 件 的 第 一 步 ， 就 是 要 擎 担 这 个 软件 的 安装 方法 ， 下 面 主要 介绍 Photoshop CC 
安装 与 由 载 的 操作 方法 。 


5.1.1 Photoshop CC 的 安装 | 


Photoshop CC 的 安装 时 间 较 长 ， 在 安装 的 过 程 中 需要 耐心 等 待 。 如 果 计 算 机 中 已 经 有 其 
他 的 版 本 ， 不 需要 凶 载 其 他 的 版 本 ,但 需要 将 正在 运行 的 软件 关闭 。 
下 面 介绍 安装 Photoshop CC 的 具体 操作 方法 。 


01| 打开 Photoshop CC 的 安装 软件 文件 夹 ， 双 击 Setup.exe 图 标 ， 安 装 软件 开始 初 
始 化 。 gf 会 显示 “欢迎 ”界面 ， 选 择 “ 试 用 ”选项 ， 如 图 5-1 所 示 。 
02 进入 “需要 登录 ”界面 ， 单 击 “ 登 录 ” 按 钮 ， 如 图 5-2 所 示 。 


需要 登录 


安装 此 产 吕 要求 使 用 Adobe ID 登录 。 您 还 可 以 通过 Adobe ID 经 松 地 访问 Adobe Creative Cloud 和 
Adobe.com 社区 ， 


图 5-1 选择 “试用 ”选项 5-2 单 击 “ 登 录 ” 按 钮 


进入 相应 界面 ， 单 击 “ 以 后 登录 ”按钮 ( 需要 断 开 网 络 连接 )， 如 图 5-3 所 示 。 

进入 “Adobe 软件 许可 协议 ”界面 ， 单 击 “ 接 受 ” 按 钮 ， 如 图 5-4 所 示 。 

进入 “选项 ”界面 在“ 位置 ”下 方 的 文本 框 中 设置 相应 的 安装 位 置 ， 然 后 单 
击 “ 安 装 ” 按 钮 ， 如 图 5-5 所 示 。 

执行 上 述 操作 后 ， 系 统 会 自动 安装 软件 ， 进 入 “安装 ”界面 ， 显 示 安 装 进度 ， 
如 图 5-6 所 示 。 如 果 用 户 需 要 取消 安装 ， 单 击 左下 角 的 “取消 ”按钮 即 可 。 
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Adobe 软件 许可 协议 
简体 中 文 


您 当 的 安装 、f de 和 ae 二， CR 时 需要 圳 守 该 协议 。 您 可 以 登录 
corygcyrmyoccount_cn 查 轩 您 目前 已 接受 的 协议 。 


藉 。 和 如 果 虑 问题 依然 存在 ， 请 


请 连接 到 Internet， 然 后 和 章 试 


请 仔 线 阅读 本 梭 议 。 太 软 悍 的 所 有 或 任意 向 分 一 经 复制 、 安 装 或 使 用 ， 辐 表示 您 (下 称 “ 客 户 ”)】 接受 太 协 议 所 规定 
的 全 都 条 炊 及 条 件 ， 所 括 但 不 能 于 许可 限 钊 阅 定 【第 4 条) 、 有 限 答 保全 6 名和 第 7 条) 、 嘲 任 限 制 《第 8 旬 ) ， 以 及 
特殊 规定 和 例外 情形 (第 16 条 ) ， 客户 辣 息 太 协 议 与 其 所 签 回 的 任何 通过 谈 询 条 立 的 书面 协议 中 有 同等 效力 ， 
可 对 客户 予以 策 制 训 行 。 客 产 如 不 接受 二 协议 的 条 轩 划 不 得 使 用 本 坎 件 。 本 协议 对 客户 在 本 协议 生效 目 期 之 看 使 用 卫 
RN 纺 尖 附 关 软件 应 参 早 本 协议 的 条 款 。 的 下 软件 先前 感 本 的 最 旋 阿 户 许 可 协议 也 可 


客户 可 与 Adobe 直 接 人 订立 另 一 书面 协议 【如 : 放量 许可 协议 ) ， 以 补充 惑 取代 本 协议 的 全 证 驳 任 何 训 中。 本科 他 民 恒 
剖 叶 本 之 议 各 项 条 蒜 的 佛 胸 下 供 洗 可 使 用 ， 不 得 出 入: 使 用 坟 软 件 外包 多 的 或 过 过 本 欢 件 访问 的 其 些 AGObe 攻 非 
Adobe 姥 料 与 服务 ， 可 能 会 受到 附加 条 款 和 条 件 的 约束 有 关 砷 Adobe 材 料 的 丙 ， 可 访问 http// 


| 


还 剩 大 约 7 分钟 (已 完成 4%) 


单 击 产品 各 以 自 定 义 迁 项 


安装 着 计 1.8 G8 
位 是 : 
E\pscc\AdobePhotoshop CC 


图 5-5 单 击 “安装 ”按钮 图 5-6 ”显示 安装 进度 


2 型 潭 07| 在 弹出 的 相应 界面 中 提示 此 次 安装 完成 ， 然 后 单 击 右 下 角 的 “关闭 ”按钮 ， 如 
图 5-7 所 示 ， 即 可 完成 Photoshop CC 的 安装 操作 。 


安装 完成 


这 些 应 用 程序 可 以 使 用 了 。 


要 管理 此 软件 或 其 它 正 版 Adobe 软件 ， 请 转 到 httPpV/www.adobe.comygo/odobemermbersnip_cn。 


我 的 Adobe | 视频 禾 程 


图 5-7 单 击 “ 天 闭 ” 按 钮 


LAS We 
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5.1.2 Photoshop CC 的 卸载 | 


Photoshop CC 的 卸载 方法 比较 简单 , 在 这 里 用 户 需要 借助 Windows 的 和 卸载 程序 进行 操作 ， 
或 者 运用 杀毒 软件 中 的 和 抒 载 功 能 来 进行 和 卸载 。 
下 面 介 绍 和 卸载 Photoshop CC 的 具体 操作 方法 。 


在 Windows 操作 系统 中 打开 “控制 面板 ”窗口 ， 单 击 “ 程 序 和 功能 ”图 标 ， 
在 弹出 的 窗口 中 选择 Adobe Photoshop CC 选项 ， 然 后 单 击 “ 秃 载 ” 按 钮 ， 如 图 5-8 所 示 。 

在 弹出 的 “ 番 载 选项 ”界面 中 选择 需要 鲫 载 的 软件 ， 然 后 单 击 右 下 角 的 “和 鲫 载 ” 
按钮 ， 如 图 5-9 所 示 。 


图 5-8 单 击 “ 邮 载 ”按钮 图 5-9 单 击 “ 节 载 ” 选 项 


一 党 03| 执行 操作 后 ， 系 统 开始 印 载 , 进入 “ 仓 载 ” 界面， 显示 软件 卸载 进度 ， 如 图 5-10 


所 未。 
2 型 河 04| 稍 等 片刻 ， 弹 出 相应 界面 ， 单 击 右 下 角 的 “关闭 ”按钮 ， 如 图 5-11 所 示 ， 即 
可 完成 外 载 。 


印 载 


当前 正在 却 匠 Adobe Photcshop CC Chinese Longuoge Pack 


图 5-10 显示 邮 载 进度 图 5-11 单 击 “ 天 闭 ” 按 钮 
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5.2 界面 详解 : 熟悉 Photoshop CC 的 工作 界面 

Photoshop CC 的 工作 界面 在 原 有 基础 上 进行 了 创新 ， 许 多 功能 更 加 界面 化 、 按 钮 化 ， 如 2 
图 5-12 所 示 。 从 图 中 可 以 看 出 ，Photoshop CC 的 工作 界面 主要 由 菜单 栏 、 工 具 箱 、 工 具 属性 
栏 、 图 像 编辑 窗口 、 状 态 栏 和 浮动 控制 面板 6 个 部 分 组 成 。 下 面 简单 地 对 Photoshop CC 工作 
界面 的 各 组 成 部 分 进行 介绍 。 


| PS 文件 中 济济 (E] 。 西 你 四。 图 呈 (L) 燃 至 (W) 带 滨 | 向 。 雍 筑 ( 3D(DH。 视图 (VI 于 口 (W) 毅 助 (H) 


RN 


3 忆 中 目 闻 跻 合同 请 国 且 上 和 入 扩 六 其 六 加 


图 5-12 ”Photoshop CC 的 工作 界面 


区 国 菜单 栏 : 包含 可 以 执行 的 各 种 命令 ， 单 击 菜单 名 称 即 可 打开 相应 的 菜单 。 

加 工具 属性 栏 : 用 来 设置 工具 的 各 种 选项 ， 它 会 随 着 所 选 工具 的 不 同 而 变换 内 容 。 
加 工具 箱 : 包含 用 于 执行 各 种 操作 的 工具 ， 如 创建 选区 、 移 动 图 像 绘画 等 。 

四 | 状态 栏 ， 显示 打开 文档 的 大 小 、 尺 寸 、 当 前 工具 和 窗口 缩放 比例 等 信息 。 

四] 图 像 编 辑 窗 口 : 是 编辑 图 像 的 窗口 。 

由 | 浮动 控制 面板 : 用 来 帮助 用 户 编辑 图 像 ， 设 置 编辑 内 容 和 设置 颜色 属性 等 。 


专家 指点 ) 


Photoshop CC 中 的 绝 大 部 分 功能 都 可 以 利用 菜单 栏 中 的 命令 来 实现 。 菜 单 栏 的 右 
侧 还 显示 了 控制 工作 界面 显示 大 小 的 “最 小 化 ”“ 最 大 化 (恢复 ) ” “关闭 ”等 几 个 快 
捷 按 钮 。 
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5.2.1 菜单 栏 | 


菜单 栏 位 于 整个 工作 界面 的 顶端 , 由 文件 “编辑 “图 像 “图 层 “选择 ”“ 涛 镜 “分 
析 “3D “视图 “窗口 ” 和 “帮助 ”11 个 菜单 命令 组 成 ， 如 图 5-13 所 示 。 


文件 (站 ”编辑 (图 像 四 ”图 层 (lL) 类 型 (Y) 选择 (5) 3D(D) ”视图 (V) 窗口 (W) ”帮助 (H) 


人 


图 5-13 菜单 栏 


园 文 件 : “文件 ”菜单 中 的 命令 可 以 针对 文件 执行 新 建 、 打 开 、 存 储 、 关 闭 、 置 入 以 
及 打印 等 一 系列 操作 。 

加 编辑 : “编辑 ”菜单 中 的 命令 可 以 对 图 像 执 行 编辑 操作 , 包括 还 原 、 剪 切 、 找 贝 、 粘 贴 、 
填充 、 变 换 以 及 定义 图 案 等 命令 。 

国 | 图像， “图 像 ” 菜 单 命令 主要 是 针对 图 像 模式 、 颜 色 、 大 小 等 进行 调整 以 及 设置 。 

四 图 层 : “图 层 ”菜单 中 的 命令 主要 是 针对 图 层 进 行 相 应 的 操作 ， 这 些 命令 便于 对 图 
层 进行 运用 和 管理 ， 如 新 建 图 层 、 复 制图 层 、 蒙 版 图 层 、 文 字 图 层 等 。 

如 类 型 :“ 类 型 "菜单 中 的 命令 主要 用 于 对 文字 对 象 进行 创建 和 设置 , 包括 创建 工作 路 径 、 
转换 为 形状 、 变 形 文字 以 及 字体 预览 大 小 等 。 

了 选择 : “选择 ”菜单 中 的 命令 主要 是 针对 选区 进行 反 向 、 修 改 、 变 换 、 扩 大 、 载 入 
选区 等 操作 ， 这 些 命令 结合 选区 工具 ， 更 便于 对 选区 进行 操作 。 

区 四 法 镜 : “ 滤 镜 ”菜单 中 的 命令 可 以 为 图 像 设 置 各 种 不 同 的 特效 。 

四 3D: 3D 菜单 中 的 命令 主要 针对 3D 图 像 执 行 操作 ， 通 过 这 些 命令 可 以 打开 3D 文件 、 
将 2D 图 像 创 建 为 3D 图 形 、 进 行 3D 泻 染 等 操作 。 

图 视图 : “视图 ”菜单 中 的 命令 可 以 对 整个 视图 进行 调整 及 设置 ， 包 括 缩放 视图 、 改 变 
屏幕 模式 、 显 示 标 尺 、 设 置 参考 线 等 。 

虐 ] 窗口 : “窗口 ”菜单 中 的 命令 主要 用 于 控制 Photoshop CC 工作 界面 中 的 工具 箱 和 各 
个 面板 的 显示 和 隐藏 。 

加 帮助 : “帮助 ”菜单 中 提供 了 使 用 Photoshop CC 的 各 种 版 主 信息 。 在 使 用 Photoshop 
CC 的 过 程 中 ， 若 遇 到 问题 ， 可 以 查看 该 菜单 ， 及 时 了 解 各 种 命令 、 工 具 和 功能 的 使 用 。 


如 果 莱 单 中 的 命令 呈现 灰色 ， 则 表示 该 命令 在 当前 编辑 状态 下 不 可 用 ; 如 果菜 单 命 
令 右 侧 有 一 个 三 角形 符号 ， 则 表示 此 菜单 包含 子 菜 单 ， 将 鼠标 指针 移动 到 该 菜单 命令 上 ， 
即 可 打开 其 子 菜单 ; 如 果菜 单 命 令 右 侧 有 省 略 号 “…”， 则 执行 此 菜单 命令 时 将 会 弹出 
与 之 相关 的 对 话 框 。 另 外 ，Photoshop CC 的 菜单 栏 相 对 于 以 前 的 版 本 来 说 ， 变 化 比较 大 ， 
现在 的 Photoshop CC 标题 栏 和 菜单 栏 是 合并 在 一 起 的 。 
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5.2.2 ”状态 栏 JU 


状态 栏 位 于 图 像 编 辑 窗口 的 底部 ， 主 要 用 于 显示 当前 所 编辑 图 像 的 各 种 参数 信息 。 状 态 
栏 主要 由 显示 比例 、 图 像 文 件 信 息 和 提示 信息 等 3 部 分 组 成 。 状 态 栏 右 侧 显示 的 是 图 像 文件 
信息 ， 单 击 图 像 文件 信息 右 侧 的 三 角形 按钮 ， 即 可 弹出 快捷 菜单 ， 其 中 显示 了 当前 图 像 文件 
信息 的 各 种 显示 方式 选项 ， 如 图 5-14 所 示 。 


图 10-11 (1) .TF @ 50%(RGB/8#) 


5-14 ”状态 栏 


区 四 和 Adobe Drive: 显示 文档 的 Version Cue 工作 组 状态 。Adobe Drive 可 以 帮助 Photoshop CC 
链接 到 Version Cue CC 服务 器 ， 链 接 成 功 后 ， 可 以 在 Windows 资源 管理 器 或 Mac OS Finder 
中 查看 服务 器 的 项 目 文件 。 

加 文档 配置 文件 ， 显示 图 像 所 有 使 用 的 颜色 配置 文件 的 名 称 。 

贺 文 档 尺寸 ; 查看 图 像 的 尺寸 。 

区 目 暂 存 盘 大 小 : 查看 处 理 图 像 的 相关 内 存 和 Photoshop 暂 存盘 的 信息 。 选 择 该 选项 后 ， 
状态 栏 中 会 出 现 两 组 数字 ， 左 边 的 数字 表达 程序 用 来 显示 所 有 打开 图 像 的 内 存量 ， 右 边 的 数 
字 表 示 用 于 处 理 图 像 的 总 内 存量 。 

因 ] 效率 : 查看 执行 操作 实际 花费 的 时 间 百 分 比 。 当 效率 为 100 时 ， 表 示 当 前 处 理 的 图 
像 在 内 存 中 生成 ， 如 果 低 于 100， 则 表示 Photoshop 正在 使 用 暂 存 盘 ， 操 作 速 度 也 会 变 慢 。 

计时 : 查看 完成 上 一 次 操作 所 用 的 时 间 。 

区 下 当前 工具 : 查看 当前 使 用 的 工具 名 称 。 

女 32 位 曝光 : 调整 预览 图 像 ， 以 便 在 计算 机 显示 器 中 查看 32 位 /通道 高 动态 范围 HDR 
图 像 的 选项 。 只 有 当 图 像 编 辑 窗口 显示 HDR 图 像 时 ， 该 选项 才 可 以 使 用 。 
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加 | 存储 进度 : 读 取 当 前 文档 的 保存 进度 。 
四 文档 大 小 : 显示 有 关 图 像 中 的 数据 量 的 信息 。 选 择 该 选项 后 ， 状 态 栏 中 会 出 现 两 组 
数字 ， 左 边 的 数字 表示 拼合 图 层 并 存储 文件 后 的 大 小 ， 右 边 的 数字 表示 包含 图 层 和 通道 的 近 


似 大 小 。 
5.2.3 工具 属性 栏 | 


工具 属性 栏 一 般 位 于 菜单 栏 的 下 方 ， 主 要 用 于 对 所 选取 工具 的 属性 进行 设置 ， 它 提供 了 
控制 工具 属性 的 相关 选项 ， 其 显示 的 内 容 会 根据 所 选 工 具 的 不 同 而 改变 。 在 工具 箱 中 选择 相 
应 的 工具 后 ， 工 具 属 性 栏 将 显示 该 工具 可 使 用 的 功能 ， 如 图 5-15 所 示 为 画笔 工具 的 工具 属 
性 栏 。 


Hi Em eo Eo 
图 5-15 ”加 笔 工 具 的 工具 属性 栏 
好 列表 箭头 按钮 : 单 击 该 按钮 ， 可 以 弹出 列表 框 ， 包括 多 种 混合 模式 ， 如 图 5-16 所 示 。 


攻 小 请 块 按钮 : 单 击 该 按钮 , 会 出 现 一 个 可 以 进行 数值 调整 的 小 滑 块 ， 如 图 5-17 所 示 。 


图 5-16 弹出 列表 框 图 5-17 数值 调整 


5.2.4 工具 箱 D 


工具 箱 如 图 5-18 所 示 位 于 工作 界面 的 左 侧 。 只 要 单 击 工具 箱 中 的 工具 按钮 即 可 在 图 像 编 
辑 窗 口中 使 用 该 工具 。 若 工具 按钮 的 右 下 角 有 一 个 三 角形 按钮 ， 则 表示 该 工具 按钮 还 包含 有 
其 他 工具 选项 ， 在 工具 按钮 上 单 击 鼠标 左 键 ， 可 弹出 所 隐 减 的 工具 选项 ， 如 图 5-19 所 示 。 
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图 5-18 ”工具 箱 


5.2.5 图 像 编 辑 窗 口 


Photoshop CC 中 的 所 有 功能 都 可 以 在 图 像 编辑 窗口 中 实现 。 打 开 文件 后 ， 图 像 编辑 窗口 
的 标题 栏 呈 灰 白色 ， 该 窗口 即 为 当前 图 像 编辑 窗口 ， 如 图 5-20 所 示 ， 此 时 所 有 操作 将 只 针 
对 该 图 像 编辑 窗口 ， 若 想 对 其 他 图 像 编辑 窗口 进行 编辑 ， 使 用 鼠标 单 击 需要 编辑 的 图 像 窗口 
即 可 。 
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图 5-20 ”当前 图 像 编辑 窗口 
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5.2.6 浮动 控制 面板 JU 

浮动 控制 面板 位 于 工作 界面 的 右 侧 ， 它 主要 用 于 对 当前 图 像 的 图 层 、 颜 色 、 样 式 以 及 相 
关 的 操作 进行 设置 。 单 击 菜单 栏 中 的 “窗口 ”菜单 名 称 ， 在 弹出 的 菜单 选择 相应 的 命令 ， 即 
可 显示 相应 的 浮动 面板 ， 分 别 如 图 5-21 ~ 图 5-24 所 示 。 


图 5-23 ”选择 “动作 ”命令 图 5-24 显示 “动作 ”浮动 面板 
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5.3 图 像 知 识 : 识别 移动 U1 设计 的 基本 图 像 


Photoshop 是 专业 图 像 处理 软 件 ， 在 学 习 移动 UI 设计 之 前 ， 必 须 了 解 并 和 擎 担 该 软件 的 一 
些 图 像 处理 的 基本 第 识 ， 这 样 才 能 在 工作 中 更 好 地 处 理 各 类 移动 UI 图 像 ， 进 而 创作 出 高 品 
质 的 APP 作品 。 本 节 主 要 向 读者 介绍 Photoshop 中 的 一 些 基本 常识 。 


5.3.1 ”位 图 与 矢量 图 


在 Photoshop 中 ， 主 要 以 矢量 图 与 位 图 两 种 格式 来 显示 图 像 ， 理 解 二 者 的 特点 可 以 帮助 
用 户 更 好 地 提高 移动 UI 设计 的 工作 效率 。 

1. 位 图 

位 图 (bitmap) 也 被 称 为 “点 阵 图 ”， 是 由 被 称 为 “像素 ”( 图 片 元 素 ) 的 单个 点 组 成 的 。 
位 图 中 的 每 一 个 像素 点 都 有 其 各 自 的 位 置 和 颜色 等 数据 信息 ， 从 而 可 以 精确 、 自 然 地 表现 出 
图 像 丰富 的 色彩 感 。 

由 于 位 图 是 由 一 个 一 个 像素 点 组 成 的 ， 因 此 ， 当 放大 图 像 时 ,像素 点 也 同时 被 放大 ,但 
每 个 像素 点 表示 的 颜色 是 单一 的 ， 放 大 后 就 会 出 现 马 赛 克 形状 ， 如 图 5-25 所 示 。 


5-25 ”位 图 原 图 与 放大 后 的 效果 


2. 入 量 图 

矢量 图 也 被 称 为 “面向 对 象 的 图 像 ” 或 “绘图 图 像 ”， 在 数学 上 被 定义 为 一 系列 由 线 连 
接 的 点 。 矢 量 图 形 占 用 内 存 空间 较 小 ， 因 为 这 种 类 型 的 图 像 文 件 包含 独立 的 分 离 图像 ， 可 以 
目 由 、 无 限制 地 重新 组 合 。 

矢量 图 形 以 几何 图 形 居多 ， 每 一 个 图 形 对 象 都 是 独立 的 ， 如 颜色 、 形 状 、 大 小 和 位 置 等 
都 是 不 同 的 ， 可 以 无 限 放 大 且 图 形 不 会 失真 ， 如 图 5-26 所 示 。 

不 过 ， 矢 量 图 形 的 色彩 表现 不 如 位 图 精确 ， 不 适宜 制作 色彩 丰富 、 细 腻 的 画面 。 
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图 5-26 矢量 图 原 图 与 放大 后 的 效果 


5.3.2 像素 与 分 辩 率 | 
像素 与 分 辩 率 是 Photoshop 中 最 常见 的 专业 术语 ， 也 是 决定 移动 UI 文 件 大 小 和 图 像 输出 
质量 的 关键 因素 。 
1. 像素 
“像素 ”是 构成 数码 影像 的 基本 单元 ， 通 常 以 ppi(pixels per inch 每 英寸 像素 数 ) 为 单位 
来 表示 影像 分 辩 率 的 大 小 。 
通常 情况 下 ， 移 动 UI 图 像 的 像素 越 高， 文件 就 会 越 大 ， 图 像 的 品质 也 就 越 好 ， 如 图 5-27 
所 示 。 


Vv vy 和 
一 HAPPY 一 
“Birthday ， 


Y 1 我 心爱 的 小 宝贝 


图 5-27 高 品质 的 移动 UI 图 像 
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2. 分 辩 率 

分 辨 率 是 指 单位 英寸 中 所 包含 的 像素 点 数 ， 其 单位 通 营 用 dpi(dots per inch) 表示 。 

在 移动 UI 图 像 中 ,分 状 率 的 高 低 对 图 像 的 质量 有 很 大 的 影响 。 通 第 情况 下 ,分辨 率 越 
高 的 移动 UI 图 像 占用 的 存储 空间 也 就 越 大 ， 图 像 也 越 清 晰 ， 分 辨 率 越 小 的 移动 UI 图 像 占用 
的 存储 空间 也 就 越 小 ， 图 像 越 模糊 ， 如 图 5-28 所 示 。 


(a) 高 分 辨 率 (b) 低 分 辩 率 
5-28 分辨 率 殖 果 对 比 


在 Photoshop 中 新 建文 件 时 ， 并 不 是 分 辩 率 越 大 越 好 ， 图 像 的 分 辩 率 应 当 根 据 其 用 途 
来 设 定 。 通 常 大 型 的 墙 体 广告 等 图 像 的 分 辨 率 一 般 为 30dpi; 发 布 于 网 页 上 的 图 像 分 辨 率 
为 72dpi 或 96dpl; 报纸 或 一 般 的 纸张 打印 的 分 辨 滨 为 120dpi 或 150dpi; 用 于 彩 版 印刷 或 
大 型 灯箱 等 图 像 的 分 辨 滨 一 般 不 低 于 300dpl。 


5.3.3 ”图片 颜色 模式 电 
在 Photoshop CC 的 工作 界面 中 ， 第 用 的 图 像 颜 色 模 式 有 4 种 ， 分 别 是 RGB 模式 、 
CMYK 模式 、 灰 度 模式 和 位 图 模式 。 
1]. RGB 模式 
Photoshop 默认 的 颜色 模式 就 是 RGB 模式 ， 它 是 图 形 图 像 设计 中 最 常用 的 色彩 模式 .。 
RGB 就 是 弟 说 的 三 原色 ，R 代表 红色 (Red)，G 代表 绿色 (Green)，B 代表 蓝 色 (Blue)， 其 中 
每 一 种 颜色 都 存在 着 256 个 等 级 的 强度 变化 。 
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当 三 原色 重 登 时 ， 不 同 的 混 色 比例 和 强度 会 产生 其 他 的 间 色 ， 因 此 三 原色 相 加 会 产生 白 
色 ， 如 图 5-29 所 示 。 

2. CMYK 模式 

CMYK 模式 与 RGB 模式 的 根本 不 同 之 处 在 于 ， 它 是 一 种 减 色 颜色 模式 。 

CMYK 代表 印刷 上 用 的 四 种 颜色 ，C 代表 青色 (Cyan)，M 代表 洋红 色 (Magenta),Y 代 
表 黄 色 (Yellow)，K 代表 黑色 (Black)， 如 图 5-30 所 示 。 


全 


二 CMYK 


5-29 RGB 的 图 像 效 果 图 5-30 CMYK 的 图 像 效 果 


CMYK 被 称 为 “四 色 印 刷 ”， 由 这 4 种 颜色 可 以 合成 生成 千变万化 的 颜色 。 例 如 ， 青 色 、 
洋红 、 黄 色 释 加 即 生 成 瞳 红色 。 


专家 指点 》) 


在 CMYK 模式 中 ， 黑 色 通 常用 来 增加 对 比 度 ， 以 补偿 CMY 3 种 颜色 混合 时 的 暗 调 ， 
加 深 暗 部 色彩 。 


3. 灰 度 模式 

灰 度 模式 采用 256 级 不 同 浓度 的 灰 度 来 描述 图 像 ， 可 以 将 图 片 转变 成 黑白 照片 的 效果 ， 
是 移动 UI 图 像 处理 中 被 广泛 运用 的 颜色 模式 。 

当 移动 UI 图 像 被 转换 为 灰 度 模式 后 ， 它 所 包含 的 所 有 颜色 信息 都 将 被 删除 ， 而 且 不 能 
完全 恢复 ， 如 图 5-31 所 示 。 

4. 位 图 模式 

位 图 模式 的 图 像 也 被 称 为 “黑白 图 像 ”， 通 过 使 用 黑 、 白 两 种 颜色 ， 表 示 图 像 中 的 像素 。 

在 移动 UI 的 设计 过 程 中 ， 当 需要 将 彩色 的 移动 UI 图 像 转换 为 位 图 模式 时 ， 必 须 先 转换 
成 灰 度 模式 ， 然 后 由 灰 度 模 式 转换 为 位 图 模式 。 
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图 5-31 灰 度 模式 的 图 像 效 果 


将 已 成 灰 度 模式 的 图 像 转换 为 位 图 模式 时 , 可 以 对 位 图 模式 的 方式 进行 相关 的 设置 ， 
选择 “图 像 | 模式 | 位 图 命令 后 , 将 弹出 “位 图 对话 框 , 在 “方法 ”选项 区 中 有 “50% 
阅 值 “图案 仿 色 “扩展 仿 色 ”““ 半 调 网 屏 ” 和“ 自 定 图 案 5 种 选项 ， 选 择 不 同 的 选 
项 时 ， 所 转换 成 位 图 的 图 像 效 果 也 有 所 不 同 。 


5.3.4 存储 文件 格式 DO ] 


Photoshop 是 使 用 起 来 非常 方便 的 移动 UI 图 像 处 理 软件 ， 支 持 20 多 种 文件 格式 。 下 面 主 
要 加 读者 介绍 第 用 的 6 种 文件 格式 。 
1]. PSD/PSB 文件 格式 


PSD/PSB 是 Adobe 公司 的 图 形 设计 软件 Photoshop 的 专用 格式 ， 也 是 唯一 支持 所 有 图 像 
模式 的 文件 格式 .。 

由 于 大 部 分 其 他 的 应 用 程序 ， 以 及 较 旧版 本 的 Photoshop ， 都 无 法 支持 大 于 2 GB 的 文件 。 
因此 ，Photoshop 为 存储 大 型 文档 而 推出 了 专门 的 格式 一 一 PSB。PSB 格式 不 但 具有 PSD 格 
式 文 件 的 所 有 属性 , 而 且 还 支持 宽度 和 高 度 为 30 万 像素 的 文件 , 同时 可 以 保存 图 像 中 的 图 层 、 
滤 锐 、 通 道 和 路 径 等 信息 。 

2. JPEG 格式 


JPEG 是 Joint Photographic Experts Group( 联合 图 像 专 家 小 组 ) 的 缩写 ， 是 第 一 个 国际 
像 压 缩 标准 。 
JPEG 格式 的 主要 特点 是 采用 高 压缩 率 、 有 损 压 缩 真 彩色 ， 但 在 压缩 文件 时 可 以 通过 控制 
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压缩 范围 来 决定 图 像 的 最 终 质 量 。 

JPEG 格式 不 仅 是 一 个 工业 标准 格式 , 更 是 Web 的 标准 文件 格式 , 其 主要 优点 是 体积 小 巧 ， 
并 且 兼 容 性 好 ， 大 部 分 的 程序 都 能 读 取 这 种 文件 格式 。 

JPEG 格式 采用 的 压缩 算法 不 但 能 够 提供 良好 的 压缩 性 能 ， 而 且 具 有 比较 好 的 重建 质量 体 
系 ， 在 图 像 、 视 频 处 理 等 领域 中 被 广泛 应 用 。 

3. TIFF 格式 


TIFF(Tag Image File Format， 标 签 图 像 文件 格式 ) 是 一 种 灵活 的 位 图 格式 ， 主 要 用 来 存储 
包括 照片 和 艺术 图 在 内 的 图 像 ， 几 乎 所 有 的 绘画 、 图 像 编 辑 和 页 面 版 式 应 用 程序 均 支 持 该 文 
件 格式 。 

TIFF 格式 主要 采用 无 损 压 缩 的 方式 ， 可 以 保存 图 像 中 的 通道 、 图 层 和 路 径 等 信息 ， 表 面 
上 与 PSD 格式 并 没有 什么 差异 。 不 过 ， 只 有 在 Photoshop 中 打开 保存 了 图 层 的 TIFF 文件 时 ， 
才能 对 其 中 的 图 层 进 行 相 应 的 修改 或 编辑 ， 如 果 在 其 他 应 用 程序 中 打开 包含 图 层 的 TIFF 文 
件 时 ， 则 其 中 的 所 有 图 层 将 会 被 合并 。 

4. AI 格式 

AI 格式 Adobe Illustrator 软件 的 矢量 图 形 存储 格式 ， 现 已 成 为 业界 矢量 图 的 标准 。AI 格 
式 占 用 的 硬盘 空间 小 ， 而 且 打 开 速 度 很 快 。 

用 户 可 以 在 Photoshop 中 将 包含 路 径 的 图 像 文 件 保存 为 AI 格式 ， 然 后 在 其 他 矢量 图 形 软 
件 ( 如 Justrator、CorelDraw 等 ) 中 直接 打开 并 对 其 进行 编辑 。 


3$. GIF 格式 
GIF 格式 (Graphics Interchange Format， 图 像 交 换 格 式 ) 是 一 种 非常 通用 旦 流行 于 Internet 
上 的 图 像 格式 。 


GIF 格式 使 用 LZW 压缩 方式 压缩 文件 ， 可 以 保存 动画 ， 最 多 只 文 持 8 位 (256 种 颜色 )， 
占用 磁盘 空间 小 ， 非 党 适合 在 因特网 上 使 用 。 
6. PNG 格式 


PNG 格式 (Portable Network Graphic， 便 携 式 网 络 图 片 ) 是 第 用 的 网 络 图 像 格 式 ， 设 计 
PNG 格式 的 目的 是 试图 用 其 蔡 代 GIF 和 TIFF 文件 格式 ， 同 时 增加 一 些 GIF 文件 格式 所 不 具 
备 的 特性 。 

PNG 格式 与 GIF 格式 的 不 同 之 处 在 于 ， 它 不 但 可 以 保存 图 像 的 24 位 真 彩色 ， 而 且 还 文 
持 透 明 背 景 和 消除 锅 齿 边缘 等 功能 ， 可 以 在 不 失真 的 情况 下 压缩 保存 图 像 。 


5.4 ”图像 操作 : 了 解 移动 UI 图 像 的 操作 模式 


Photoshop CC 作为 一 款 图 像 处 理 软件 ， 绘 图 和 图 像 处 理 是 它 的 看 家 本 领 。 在 使 用 
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Photoshop CC 开始 创作 之 前 ， 需 要 先 了 解 此 软件 的 一 些 第 用 操作 ， 如 新 建文 件 、 打 开 文 件 、 
保存 文件 和 关闭 文件 等 。 熟 练 掌握 各 种 操作 ， 才 可 以 更 好 、 更 快 地 设计 作品 。 


5.4.1 新建 空 日 图 像 文 件 | 


在 Photoshop 中 不 仅 可 以 编辑 一 个 现 有 的 移动 UI 图 像 ， 也 可 以 新 建 一 个 空白 文件 ， 然 后 
再 进行 各 种 编辑 操作 。 
下 面 介 绍 新 建 移动 UI 图 像 文件 的 具体 操作 方法 。 


选择 “文件 ”| “新建 ”命令 ， 弹 出 “新 建 ” 对 话 框 ， 在 “名 称 ” 右 侧 的 文本 
框 中 设置 “名 称 ” 为 “移动 UI 界 面 ”, 在 “ 预 设 ”选项 区 中 分 别 设置 “宽度 ”为 480 像素 、“ 高 
度 ” 为 800 像素 、“ 分 辨 率 ”为 300 像素 /英寸 、 “颜色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 
为 “白色 ”， 如 图 5-32 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 即 可 显示 新 建 的 空白 图 像 ， 如 图 5-33 所 示 。 


关 | 
名 称 (N): 移动 U 荔 面 
预 设 (P): 自 定 
kh 7] | Ce 
宽度 (W): 480 像素 ] 
高 度 (H): 800 像素 
分 辩 奎 (R): 5 人 和 质 村 
颜色 模式 (M): RGB 颜色 ~ 8 位 | 
背景 内 容 (C): 白色 -I 
人 高 级 2 
颜色 配置 文件 (0): 工作 中 的 RGB: sRGB ]EC6196.. | 
像素 长 宽 比 (X): 方形 像素 


图 5-32 设置 相应 参数 图 5-33 新建 空白 图 像 


5.4.2 打开 UI 图像 文件 JW 


Photoshop CC 不 仅 可 以 支持 多 种 图 像 的 文件 格式 , 还 可 以 同时 打开 多 个 移动 UI 图 像 文件 。 
若 要 在 Photoshop 中 编辑 一 个 图 像 文件 ， 首 先 需 要 将 其 打开 。 
下 面 介绍 打开 移动 UI 图 像 文件 的 具体 操作 方法 。 
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选择 文件 “打开 命令 ， 弹出“ 打开” 对话 框 ， 选 择 相应 的 素材 图 像 ， 如 
图 5-34 所 示 。 


pg 菇 当 02| 单 击 “ 打 开 ” 按 钮 ， 即 可 打开 所 选择 的 图 像 文件 ， 如 图 5-35 所 示 。 


x 
[I 上 < UL ， 光 盘 ， 素 材 ， 笋 5 各 Mh EE 内 


其 cp 3 EE) _ 


文件 名 (N)j:; 5.4.2JPG 


图 5-34 ”选择 素材 图 像 文 件 图 5-35 打开 图 像 文件 


5.4.3 ”保存 U1 图像 文件 


在 对 新 建 的 图 像 文件 或 者 打开 的 图 像 文件 进行 编辑 后 ， 应 及 时 地 保存 移动 UI 图 像 文 件 ， 
以 免 因 各 种 原因 而 导致 文件 丢失 。Photoshop CC 可 以 支持 20 多 种 图 像 文件 格式 ， 因 此 用 户 


可 以 选择 不 同 的 格式 存储 文件 。 
下 面 介绍 保存 移动 UI 图 像 文件 的 具体 操作 方法 。 


选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 5-36 所 示 。 

选择 “文件 ”|“ 存 储 为 ”命令 ,弹出 “另存 为 ”对 话 框 ,设置 相应 的 保存 位 置 ， 
并 设置 “保存 类 型 ”为 JPEG， 如 图 5-37 所 示 , 单 击 “ 保 存 ” 按 钮 , 弹出 信息 提示 框 , 单 击 “ 确 
定 ” 按 钮 ， 即 可 完成 操作 。 
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我 的 单词 书 

今日 单词 新 的 单词 

配色 : 站 | 使 用 校 样 设置 (OQ): 工 

作 中 的 CMYK 
同 ICC 配置 文件 (C): 
正在 学 习 掌握 单词 a sRGB IEC61966-2.1 
其 它 园 缩 览 图 
图 5-36 ”打开 素材 图 像 图 5-37 设置 选项 


5.4.4 关闭 UI 图 像 文 件 


在 Photoshop CC 中 完成 移动 UI 图 像 的 编辑 后 ， 若 用 户 不 再 需要 该 图 像 文件 ， 可 以 采用 
以 下 的 方法 关闭 文件 ， 以 保证 电脑 的 运行 速度 不 受 影响 。 
@ 关闭 文件 : 选择 “文件 | 关闭 ”命令 或 按 Ctrl+W 组 合 键 ， 如 图 5-38 所 示 。 
@ 关闭 全 部 文件 : 如 果 在 Photoshop 中 打开 了 多 个 文件 ， 可 以 选择 “文件 ” |“ 关闭 全 部 
命令 ， 关 闭 所 有 文件 。 
e 退出 程序 : 选择 文件 | 退出 ”命令 ， 或 单 击 工作 界面 右上 角 的 “关闭 ”按钮 ， 如 
图 5-39 所 未。 


Ps 医 
EE pe 
| “打开 (0).. Ctrl+O 
CT 在 Bridge 中 浏览 (B). Ait+Ctrl+O 
| 在 Mini Bridge 中 浏览 (G).. 
Fr 打开 为 .… At+Shif+Ctrl+OD 
a, 
评 ， Alt+Ctrl+W 
5 Shift+ Ctrl+W 
i Ctrl+S 
“| 。 存 仿 为 (A).… Shift+Ctrl+S 
芝 。 
二 存储 为 Web 所 用 格式 … At+Shift+Ctrl+S 
~, F12 


图 5-38 ”选择 “关闭 ”命令 图 5-39 单 击 “ 关 闭 ” 按 钮 
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5.4.5 完成 图 像 的 撤销 操作 JU 


用 户 在 进行 移动 UI 图 像 处 理 时 ， 若 对 创建 的 效果 不 满意 或 出 现 了 失误 操作 ， 可 以 对 图 
像 进行 撤销 操作 。 
@ 还 原 与 重 做 : 选择 “编辑 ”|“ 还 原画 笔 工 具 ” 命 令 ， 如 图 5-40 所 示 ， 可 以 撤销 对 图 
像 进行 的 最 后 一 次 操作 ,还原 至 上 一 步 的 编辑 状态 ; 若 需 要 撤销 还 原 操 作 , 可 以 选择 编 
辑 | “ 重 做 画笔 工具 ”命令 ， 如 图 5-41 所 不 。 


图 5-40 单 击 “还 原画 笔 工 具 ” 命 令 图 5-41 单 击 “ 重 做 画笔 工具 ”命令 


@ 前 进一步 与 后 退 一 步 : “还 原画 笔 工具 ”命令 只 能 还 原 一 步 操 作 ， 如 采 需 要 还 原 更 多 
的 操作 ， 可 以 连续 选择 “编辑 | “后 退 一步” 命令。 在 “后 退 一 步 ” 操 作 错 误 时 ， 可 
以 选择 “编辑 | “前 进一步 ”命令 ， 回 到 上 一 步 操 作 。 


5.4.6 ”应 用 快照 还 原 图 像 


在 进行 移动 UI 图 像 处 理 过 程 中 ， 若 对 图 像 处 理 的 效果 不 满意 时 ， 可 以 通过 新 建 快照 还 
原 图 像 。 当 绘制 完 重要 的 效果 以 后 ， 单 击 “ 历 史记 录 ” 面 板 中 的 “创建 新 快照 ”按钮 ， 将 图 
像 的 当前 状态 保存 为 一 个 快照 , 用 户 就 可 以 通过 单 击 创建 的 快照 还 原 图 像 效 果 ， 如 图 5-42 所 示 。 
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删除 当前 状态 


5-42 ”创建 快照 


从 当前 状态 
创建 新 文档 
N96 
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5.4.7 ”恢复 图 像 初始 状态 JU 


在 编辑 移动 UI 图 像 的 过 程 中 ， 若 对 创建 的 效果 不 满意 时 ， 可 以 通过 菜单 栏 中 的 “恢复 
命令 ， 将 图 像 文件 恢复 为 初始 状态 ， 执 行 “恢复 ”命令 的 前 后 效果 如 图 5-43 所 示 。 


在 Bridge 中 浏览 (B)... 
在 Mini Bridge 中 浏览 (G).. 


5-43 恢复 图 像 为 初始 状态 


5.5 窗口 震 万 : 七 握 移动 U| 图像 的 窗口 操作 


在 Photoshop CC 中 ， 可 以 同时 打开 多 个 移动 UI 图 像 文件 ， 其 中 当前 图 像 编 辑 窗口 将 会 
显示 在 最 前 面 ; 还 可 以 根据 工作 需要 移动 窗口 位 置 、 调 整 窗口 大 小 、 改 变 窗 口 排列 方式 或 
在 各 窗口 之 间 切 换 ， 让 工作 环境 变 得 更 加 向 洁 。 本 节 将 详细 介绍 Photoshop CC 窗口 的 管理 


5.5.1 调整 还 原 窗口 设置 | 


使 用 Photoshop CC 处 理 移 动 UI 图 像 文 件 时 ， 根 据 工作 的 需要 可 以 改变 图 像 编 辑 窗口 的 
大 小 ， 从 而 提高 工作 效率 ,最 小 化 、 最 大 化 和 恢复 按钮 位 于 图 像 编辑 窗 口 的 右上 角 ， 如 图 5-44 
所 未 。 


图 5-44 图 像 文 件 窗口 
单 击 标题 栏 中 的 “最 大 化 ”[ 虽 j 和 “最 小 化 ”[E | 按钮 ， 就 可 以 将 图 像 编辑 窗口 最 大 化 或 
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最 小 化 ,将 鼠标 指针 移 至 图 像 编辑 窗口 的 标题 栏 上 , 单 击 鼠 标 左 键 的 同时 并 向 下 拖 忠 ,如 图 5-45 
所 示 ; 将 鼠标 指针 移 至 图 像 编辑 窗口 标题 栏 上 的 “最 大 化 ”按钮 .| 上 ， 单 击 鼠 标 左 键 ， 即 可 
最 大 化 窗 口 9 如 图 2-46 所 示 。 


PS 文件 中 ”这 痪 日 ” 像 由 图 后 IU， 尖 开 lr] 进 到 回 。 主 并 人 3DID)， 视 回击 口 天 隐 (H) 


5-45” 拖 多 标题 栏 


5-46 最 大 化 窗口 
将 鼠标 指针 移 至 图 像 编 辑 窗口 标题 栏 上 的 “最 小 化 ”按钮 [二 | 上 ， 单 击 鼠 标 左 键 ， 即 可 
最 小 化 窗口 。 当 图 像 编 辑 窗口 处 于 最 大 化 或 者 是 最 小 化 的 状态 时 ， 用 户 可 以 单 击 标题 栏 右 侧 
的 “恢复 ”按钮 器 来 恢复 窗口 。 


5.5.2 展开 / 折 生 面板 设置 DO 
在 Photoshop CC 中 包含 了 多 个 面板 ,在 “窗口 ”菜单 中 可 以 选择 需要 的 面板 命令 ， 将 相 
应 的 面板 打开 。 


在 设计 移动 UI 图像 时 ， 可 以 根据 个 人 的 工作 习惯 将 面板 放 在 方便 使 用 的 位 置 ， 或 将 两 
个 或 多 个 面板 合并 到 一 个 面板 中 ， 如 图 5-47 所 示 。 当 需要 调用 其 中 某 个 面板 时 ， 只 需要 单 击 


98 


“和 和 


软件 进 阶 、 医 
KR Photoshop 移动 UI 快速 上 手 芽 


其 标签 名 称 即 可 ， 这 样 能 提高 工作 效率 。 


中 


简单 的 光影 地 制 技巧 


图 5-47 ”展开 / 折 蕉 面板 


5.5.3 ”移动 调整 面板 设置 o| 


在 处 理 移动 UI 图 像 的 过 程 中 ， 为 了 充分 利用 编辑 窗口 的 空间 ， 用 户 可 以 根据 个 人 的 习 
惯 随意 移动 面板 或 者 调整 面板 的 大 小 。 
下 面 介绍 移动 和 调整 面板 大 小 的 具体 操作 方法 。 


选择 文件 "| 打开 ”命令 ,打开 一 幅 素材 图 像 ,移动 鼠标 指针 至 面板 上 方 的 区 域 ， 
如 图 5-48 所 示 。 


Ps 这 1 六 二 (日 ， 固 当 [| 画展) 当政 和 Y] 污 扬 (9 读 抠 个。 3DIC 击 加 人 VW) 音 DW) 各 号 [H) 


团 


QQ 樟 雪 赤 是 J) 系 列 妇 / 而 揪 奖 


推荐 交 美 教育 职场 未 子 情感 
sr rR 


场 管 ] Financial Planning 更 & 
二 过 四 
人 
乔 二 冲模 的 人 < hk, 
LESLLLE . 
Y 、 - 
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图 5-48 移动 鼠标 指针 
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~ ED 


单 击 鼠 标 左 键 的 同时 并 拖 虹 至 合适 位 置 ， 然 后 释放 鼠标 左 键 ， 即 可 移动 面板 ， 
如 图 5-49 所 示 。 


Ps 安生 六 蝇 (E] 轿 从 0 轿 司 () 类型 (YW 壕 毛 (泥沼 m3D(D) 视 双 (VW) 冀 口 W) 其 有 (HI) 
i 写 >| 刁 国名 名 | We: [of 来 | 口 没 N 二 | 检 R: [ER <] 及 | | 奢 高 了 | || | 调整 沁 和 | 


QQ 搜索 话题 /系列 课 / 下 由 问 


推荐 变 姜 教育 职场 ”亲子 情感 


ES Sd 
99 节 北 展 情感 专栏 5 招 女子 防身 术 
8 万 次 学 习 49312 次 学 习  “ 


nw PGE7 dM oNNENSIN xn? | 


5-49 ”移动 控制 面板 


展开 “通道 ”面板 ， 将 鼠标 指针 移 至 面板 的 边缘 处 ， 鼠 标 指 针 呈 双向 箭头 形状 
1， 如 图 5-50 所 示 。 


i "| 国史 | :oR |] 口 和 je5 | 攀 t: [I |] 共 |  ] 六 训 度 [| || [ 词 亚 过 各 


QQ 搜 案 送 题 /系列 课 / 直 播 间 
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Wen 
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图 5-50 ”鼠标 指针 呈 双 向 箭头 形状 


按 住 鼠标 左 键 的 同时 向 上 拖 忠 ， 执 行 操作 后 ， 即 可 调整 面板 的 大 小 ， 如 图 5-51 
所 示 。 
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QQ 扫 索 话 器 /未 列 课 / 直 项 问 


推荐 变 美 于 育 职场 亲子 ”情感 


DE PSE73 donNANNSIN KA 国 7 i 


图 5-51 苦 整 面板 大 小 


5.5.4 ”图像 编辑 窗口 排列 设置 


在 Photoshop CC 中 ， 当 打开 多 个 移动 UI 图 像 文件 时 ， 每 次 只 能 显示 一 个 图 像 编 辑 窗口 
内 的 图 像 。 若 需要 对 多 个 窗口 中 的 内 容 进行 比较 ， 则 可 将 各 窗口 以 水 平平 铺 、 浮 动 、 层 倒 和 
选项 卡 等 方式 进行 排列 。 

下 面 介 绍 调整 图 像 窗口 排列 的 具体 操作 方法 。 


2 弄 湖 01| 选择 “文件 ” |“ 打开” 命令， 打开 3 幅 素材 图 像 ， 如 图 5-52 所 示 。 


PSs 文 作 (f) 乔 温 身 ” 丁 伪作 ”本 刁 (L】 沁 服 (Y) 笑 逢 (5 沽 用 个 3DID， 下 M 本 QIwW 本 的 (H) 


图 5-52 打开 素材 图 像 
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02| 选择 “窗口 ”| “排列 ”|“ 平 铺 ” 命 令 ,， 即 可 平 铺 图 像 编辑 窗口 ， 如 图 5-53 所 示 。 


PS 文件 {F) 帅 碟 (日 ”图 澡 由 轿 旦 (类 型 人 Y) 远 择 全 主 红 站。3DID) 规 图 () 寞 口 [IW) 部 助 (H) 
i -| 曙 国 后 | Bt: [oR |] 口 济 oi8 贞 | 和 [IE *] mg ”|] 过 高 应 | ”| | [REi&-] 
ls | 


CE CR J Rd J -i EE 
| 
xX 区 
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图 5-53 平 铺 窗口 中 的 图 像 
一 河 03| 选择 “窗口 ”|“ 排 列 ”|“ 使 所 有 内 容 在 窗口 中 浮动 ”命令 ， 即 可 浮动 排列 图 
像 编 辑 窗口 ， 如 图 5-54 所 示 。 
天河 04| 单 击 “窗口 ”|“ 排 列 ”|“ 将 所 有 内 容 合 并 到 选项 卡 中 ”命令 ， 即 可 以 选项 卡 
的 方式 排列 图 像 窗 口 ， 如 图 5-55 所 示 。 


图 5-54 浮动 排列 图 像 编辑 窗口 图 5-55 ”以 选项 卡 的 方式 排列 图 像 编辑 窗口 


5.5.5 ”图像 编辑 窗口 切换 设置 JW 


设置 在 处 理 移动 UI 图 像 的 过 程 中 ， 如 果 工 作 界 面 中 同时 打开 多 幅 素材 图 像 ， 则 可 以 根 
据 需 要 在 各 窗口 之 间 进行 切换 ， 让 工作 界面 变 得 更 加 方便 、 快 捷 ， 从 而 提高 工作 效率 。 
下 面 介绍 切换 图 像 编辑 窗口 的 具体 操作 方法 。 


_L-_______________IN102 


“和 和 


《KAS Photoshop 移动 U1 快速 上 手 外 


选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 两 幅 素材 图 像 ， 将 鼠标 移 至 5.5.5(b).jpg 素 
材 图 像 的 窗口 标题 栏 上 ， 单 击 鼠 标 左 键 ， 如 图 5-56 所 示 。 


i -| 日 m 国 理 | 列 ;58E | RS | et: 


一 UC | 


4< 找 一 起 干 大 厄 | 


经 并 必 听 每 日 必 杀 听 头 条 折 暴 短 畏 VIP 会 呈 
哄 玲 春 和 。。 边 是 边 看 一 余生 高 线 想 课 


聊 狐 多 地 入 看 气 温 兆 高 部 分 地 区 上 凋 高 温 津 贴 请 


猜 你 喜欢 (他 各 瑰 六 男 沂 


5-56 单 击 鼠 标 左 键 


执行 操作 后 ， 即 可 将 5.5.5(b).jpg 素材 图 像 的 窗口 设置 为 当前 图 像 编 辑 窗 口 ， 
如 图 5-57 所 示 。 


ee | NR | 


基本功 能 
， 、、 
本 全 日 喇 
2 = 


5-57 设置 为 当前 图 像 编辑 窗口 


到 像 编 辑 窗口 大 小 调整 


在 Photoshop CC 中 ， 图 像 编 辑 窗口 的 大 小 是 可 以 随意 调整 的 ， 如 果 在 处 理 移 动 UI 图 像 
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的 过 程 中 ， 需 要 将 其 放 在 合适 的 位 置 ， 这 时 就 要 调整 图 像 编 辑 窗口 的 大 小 。 
下 面 介绍 调整 图 像 编辑 窗口 大 小 的 具体 操作 方法 。 


选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 将 鼠标 指针 移 至 图 像 编辑 
窗口 的 边框 线 上 ， 鼠 标 指针 呈 双 向 箭头 4 形状 ， 如 图 5-58 所 示 。 

单 击 女 标 左 键 的 同时 向 左 拖 虹 鼠 标 指针 ， 即 可 改变 窗口 的 大 小 ， 效 果 如 图 5-59 
所 未。 


[EG 


在 Photoshop CC 中 编辑 移动 UI 图像 时 ,可 以 根据 个 人 习惯 将 窗口 移 至 方便 使 用 的 位 置 。 
首先 选中 图 像 窗口 标题 栏 ， 单 击 忌 标 左 键 的 同时 并 拖 息 至 合适 位 置 ， 然 后 释放 鼠标 左 键 ， 
即 可 移动 图 像 编辑 窗口 ， 如 图 5-60 所 示 。 
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学 习 提 示 


移动 UI 设计 由 色彩 、 图 形 、 文 案 3 大 要 素 构 成 。 调 整 图 像 色 彩 是 移动 UI 
设计 中 一 项 非常 重要 的 内 容 ， 图 像 和 文案 都 离 不 开 色 彩 的 表现 。 本 章 主要 介绍 
在 Phoroshop 中 如 何 调整 图 像 的 光影 色调 ， 以 及 通过 相应 的 调整 命令 调整 移动 
UI 图 像 的 光 效 质感 。 


本 章 重 点 导航 


〇 色相 区 分 

@ 明度 标准 

〇 色彩 饱和 度 

@ 颜色 的 分 布 状态 
颜色 模式 转换 
〇 色 域 范围 的 识别 


“自动 色调 ”命令 
“自动 对 比 度 ”命令 
“自动 颜色 ”命令 
色 阶 | 2 


OOO OO OO 


3 的 和 中 人 


腕 币 89100 > 
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6.1 色彩 解析 : 了 解 移动 U| 图 像 的 颜色 属性 


颜色 可 以 修饰 图 像 ， 使 图 像 的 色彩 显得 更 加 绚丽 多 彩 。 不 同 的 颜色 能 表达 不 同 的 感情 和 
思想 ， 正 确 地 运用 颜色 能 使 黯淡 的 图 像 明亮 ， 使 毫 无 生气 的 图 像 充 满 活 力 。 色 彩 的 3 要 素 为 
色相 、 饱 和 度 和 明度 ， 这 3 种 要 素 以 人 类 对 颜色 的 感觉 为 基础 ， 构 成 人 类 视觉 中 完整 的 颜色 
表 相 。 


6.1.1 色相 区 分 时 


在 设计 移动 UI 图 像 时 ， 首 先 应 了 解 图 像 的 色相 属性 。 色 相 (Hue， 简 写 为 匡 是 色彩 三 
素 忆 一 ， 即 色彩 相貌 ， 也 就 是 每 种 颜色 的 固有 颜色 表 相 ， 是 每 种 颜色 相互 区 别 的 最 显著 特征 。 

在 通 第 的 使 用 中 ， 颜 色 的 名 称 就 是 根据 其 色相 来 决定 的 ， 例 如 红色 、 橙 色 、 蓝 色 、 黄 色 、 
绿色 。 赤 ( 红 )、 橙 、 黄 、 绿 、 青 、 赣 、 紫 是 7 种 最 基本 的 色相 ， 将 这 些 色相 相互 混合 可 以 产 
生 许多 颜色 。 

色 轮 是 研究 颜色 相 加 混合 的 颜色 表 ， 通 过 色 轮 可 以 展现 各 种 色相 之 间 的 关系 ， 如 图 6-1 
所 未。 


图 6-1 色 轮 


除了 以 颜色 固有 的 色相 来 命名 颜色 外 ， 还 经 第 以 植物 所 具有 的 颜色 命名 ( 如 青绿 )、 以 动 
物 所 具有 的 颜色 命名 ( 如 鸽子 灰 )， 以 及 以 颜色 的 深浅 和 明暗 命名 ( 如 暗 红 )。 


视觉 美感 = 
C644 Ul 的 色彩 与 风格 设计 


平 
6 

Eo 
< 


色相 是 色彩 的 首要 特征 ， 是 区 别 各 种 不 同 颜 色 的 最 准确 的 标准 。 


6.1.2 明度 标准 JU 


图 像 的 亮度 (Value， 简 写 为 V， 又 称 为 明度 ) 是 指 图 像 中 颜色 的 明暗 程度 ， 通 和 营 使 用 从 
0 一 100% 的 百分比 来 度量 。 在 正常 强度 的 光线 照射 下 的 色相 ， 被 定义 为 “标准 色相 ”; 亮 
度 高 于 标准 色相 的 ， 被 称 为 该 色相 的 “高 光 ”， 反 之 被 称 为 该 色相 的 “阴影 ”。 

在 移动 UI 设计 中 ,不 同 亮度 的 颜色 给 人 的 视觉 感受 各 不 相同 ， 高 亮度 颜色 给 人 以 明亮 、 
纯净 、 唯 美 等 感觉 ， 如 图 6-2 所 示 ， 中 亮度 颜色 给 人 以 朴素 、 稳 重 、 亲 和 的 感觉 ， 低 亮度 颜 
色 则 让 人 感觉 压抑 、 沉 重 、 神 秘 ， 如 图 6-3 所 示 。 


[ 


图 6-2 ”高 亮度 颜色 


6.1.3 色彩 饱和 度 | 


图 像 的 饱和 度 (Chroma， 侧 写 为 C， 又 称 为 彩 度 ) 是 指 颜色 的 强度 或 纯度 ， 它 表示 色相 
中 颜色 本 身 色素 分 量 所 占 的 比例 ， 使 用 从 0 ~ 100% 的 百分比 来 度量 。 在 标准 色 轮 上 ， 饱 和 
度 从 中 心 到 边 绿 逐 渐 递 增 ， 颜色 的 饱和 度 越 高 ， 其 鲜艳 程度 也 就 越 高 ， 反 之 颜色 则 因 包 含 其 
他 颜色 而 显得 陈旧 或 混 剖 。 

在 移动 UI 设计 中 ， 不 同 饱 和 度 的 颜色 会 给 人 带 来 不 同 的 视觉 感受 ， 高 饱和 度 的 颜色 给 
人 以 积极 、 冲 动 、 活 泌 、 有 生气 、 襄 庆 的 感觉 ， 如 图 6-4 所 示 ; 低 饱 和 度 的 颜色 给 人 以 消极 、 
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无 力 、 安 静 、 沉 稳 、 厚 重 的 感觉 ， 如 图 6-5 所 示 。 


图 6-4 ”高 饱和 度 颜色 图 6-5” 低 饱和 度 颜 色 
6.1.4 ”颜色 的 分 布 状态 | 


在 移动 UI 设计 中 ， 色 彩 与 色调 的 处 理 是 非常 重要 的 工作 。 因 此 ， 在 开始 进行 移动 UI 图 
像 的 颜色 校正 之 前 ， 或 者 对 图 像 做 出 编辑 之 后 ， 都 应 分 析 图 像 的 色 阶 状态 和 色 阶 分 布 ， 以 决 
定 需要 编辑 的 区 域 。 

1. “信息 ”面板 

在 没有 进行 任何 操作 时 ，“ 信 息 ” 面 板 显示 鼠标 指针 所 处 位 置 的 颜色 值 、 文 档 的 状态 、 
当前 工具 的 使 用 提示 等 信息 ， 如 果 执 行 了 操作 ，“ 信 息 ” 面 板 中 就 会 显示 与 当前 操作 有 关 的 
各 种 信息 。 

在 Photoshop CC 中 , 选择 “窗口 ”| 信息 ”命令 , 或 按 F8 键 , 将 弹出 “信息 ”面板 , 如 图 6-6 
所 示 。 


图 6-6 “信息 ”面板 
“信息 ”面板 中 各 选项 的 主要 含义 如 下 。 
国 国 第 一 颜色 信息 : 在 该 选项 的 下 拉 列 表 中 可 以 设置 “信息 ”面板 中 第 一 个 吸管 显示 的 颜 
色 人 信息。 选择“ 实际 颜色 ”选项 ， 可 以 显示 图 像 当 前 颜色 模式 下 的 值 ， 选 择 “ 校 样 颜色 ” 选 
项 可 以 显示 图 像 的 输出 颜色 空间 的 值 ,选择 “ 灰 度 ”“RGB 颜色 ”“CMYK 颜色 ”等 颜色 模式 ， 
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可 以 显示 相应 颜色 模式 下 的 颜色 值 ， 选 择 “ 油 墨 总 量 ” 选 项 ， 可 以 显示 鼠标 指针 当前 位 置 的 
所 有 CMYK 油墨 的 总 百分比 ， 选 择 “ 不 透明 度 ” 选 项 ， 可 以 显示 当前 图 层 的 不 透明 度 ， 该 选 
项 不 适用 于 背景 图 像 。 

加 鼠标 指针 坐标 ， 用 来 设置 鼠标 指针 位 置 的 测量 单位 。 

基 第 二 颜色 信息 用 来 设置 “信息 ”面板 中 第 二 个 吸管 显示 的 颜色 信息 。 

四 状态 信息 : 用 来 设置 “信息 ”面板 中 “状态 信息 ”处 的 显示 内 容 。 

2. “直方 图 ”面板 

直方 图 是 一 种 统计 图 形 , 它 由 来 已 久 , 在 图 像 领 域 的 应 用 非常 广泛 。Photoshop CC 的 “ 直 
方 图 ”面板 用 图 形 方式 表示 了 图 像 的 每 个 亮度 级 别 的 像素 数量 ， 展 现 了 像素 在 图 像 中 的 分 布 
情况 。 通 过 观察 直方 图 ， 可 以 快速 判断 出 图 像 的 阴影 、 中 间 调 和 高 光 中 包含 的 细节 是 否 充足 ， 
以 便 对 其 做 出 正确 的 调整 。 在 Photoshop CC 中 ,选择 “窗口 ”|“ 直 方 图 ”命令 ,将 弹出 “ 直 
方 图 ”面板 ， 如 图 6-7 所 示 。 

“直方 图 ”面板 中 各 选项 的 主要 含义 如 下 。 


村 


源 
1 三 
中 间 值 : 69 


图 6-7 “直方 图 ”面板 

鞠 通 道 : 在 列表 框 中 选择 一 个 通道 (包括 颜色 通道 、Alpha 通道 和 专 色 通道 ) 以 后 ， 面 
板 中 会 显示 该 通道 的 直方 图 ; 选择 “明度 ”选项 , 可 以 显示 复合 通道 的 亮度 或 强度 值 ， 选择“ 颜 
色 ” 选 项 ， 可 以 显示 图 像 中 单个 图 像 通道 的 复合 直方 图 。 

攻 有 平均 值 ， 显示 了 像素 的 平均 亮度 值 (0 ~ 255 之 间 的 平均 亮度 )， 通 过 观察 该 值 ， 可 以 
判断 出 图 像 的 色调 类 型 。 

加 标准 偏差 : 该 数值 显示 了 亮度 值 的 变化 范围 ,车 该 值 越 高 , 说 明 图 像 的 亮度 变化 越剧 烈 。 

四 中 间 值 ,显示 了 亮度 值 范 围 内 的 中 间 值 ， 图 像 的 色调 越 亮 ， 它 的 中 间 值 就 越 高 。 

时 像素 : 显示 了 用 于 计算 直方 图 的 像素 总 数 。 

寻 色 阶 : 显示 了 鼠标 指针 下 面 区 域 的 亮度 级 别 。 
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园 数 量 : 显示 了 鼠标 指针 下 面 亮度 级 别 的 像素 总 数 。 

E 国 百 分 位 : 显示 了 鼠标 指针 所 指 的 级 别 或 该 级 别 以 下 的 像素 累计 数 ， 如 果 对 全 部 色 阶 范 
围 进行 取样 ， 该 值 为 100， 对 部 分 色 阶 取样 时 ， 显 示 的 是 取样 部 分 的 值 。 

加 高速 缓存 级 别 ， 显示 了 当前 用 于 创建 直方 图 的 图 像 高 速 缓存 的 级 别 。 

四 点 击 可 获得 不 带 高 速 缓 存 数据 的 直方 图 : 使 用 “直方 图 ”面板 时 ，Photoshop CC 会 在 
内 存 中 高 速 缓存 直方 图 ， 也 就 是 说 ， 最 新 的 直方 图 是 被 Photoshop CC 存储 在 内 存 中 ， 而 非 实 
时 显示 在 “直方 图 ”面板 中 。 

加 不 使 用 高 速 缓存 的 刷新 : 选择 该 命令 可 以 刷新 直方 图 ， 显 示 当 前 状态 下 最 新 的 统计 
结果 。 
四面 板 的 显示 方式 ，“ 直 方 图 ”面板 的 快捷 菜单 中 包含 切换 面板 显示 方式 的 命令 。“ 紧 
凑 视 图 ”是 默认 显示 方式 ， 它 显示 的 是 不 带 统计 数据 或 控件 的 直方 图 ，“ 扩 展 视图 ”显示 的 
是 带 统计 数据 和 控件 的 直方 图 ，“ 全 部 通道 视图 ”显示 的 是 带 有 统计 数据 和 控件 的 直方 图 ， 
同时 还 显示 每 一 个 通道 的 单个 直方 图 。 


6.1.5 颜色 模式 转换 | 


Photoshop CC 可 以 支持 多 种 图 像 颜 色 模 式 ， 在 设计 与 输出 移动 UI 图 像 的 过 程 中 ， 应 当 
根据 其 用 途 与 要 求 ， 转 换 移动 UI 图 像 的 颜色 模式 。 下 面 对 RGB 模式 、CMYK 模式 、 灰 度 模 
式 、 多 通道 模式 这 4 种 主要 模式 的 转换 方法 进行 介绍 。 

1. 转换 为 RGB 模式 

RGB 模式 是 目前 应 用 最 广泛 的 颜色 模式 之 一 ， 用 RGB 模式 处 理 移动 UI 图 像 比较 方 
便 ， 且 存储 文件 较 小 。RGB 模式 为 彩色 图 像 中 每 个 像素 的 RGB 分 量 指定 一 个 介 于 0( 黑 
色 ) ~ 255( 白 色 ) 之 则 的 强度 值 ， 当 所 有 参数 值 均 为 255 时 ， 得 到 的 颜色 为 纯 白 色 ， 当 所 有 
参数 值 均 为 0 时 ， 得 到 的 颜色 为 纯 黑 色 。 

在 Photoshop CC 中 , 可 以 根据 需要 转换 移动 UI 图 像 为 RGB 颜色 模式 。 选 择 “ 图 像 | 模 
式 ”|“RGB 颜色 ”命令 ， 如 图 6-8 所 示 为 转换 图 像 为 RGB 颜色 模式 前 后 的 对 比 效果 。 

2. 转换 为 CMYK 模式 

CMYK 模式 又 称 为 “印刷 四 分 色 ” 模 式 ， 它 是 彩色 印刷 时 党 第 采用 的 一 种 套色 模式 ， 主 
要 是 利用 色 料 的 三 原色 混 色 原理 ， 然 后 加 上 黑色 油墨 来 调整 明暗 ， 共 计 4 种 颜色 混合 一 加 。 
只 要 是 在 印刷 品 上 看 到 的 移动 UI 图 像 ， 就 是 通过 CMYK 模式 来 表现 的 。 

下 面 介绍 转换 移动 UI 图 像 为 CMYK 模式 的 具体 操作 方法 。 
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CMYK 颜色 模式 


6-8 图 像 转换 为 RGB 模式 前 后 的 对 比 效果 


二 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-9 所 示 。 
去; 河 02| 选择 “图 像 ”|“ 模 式 ”|“CMYK 颜色 ”命令 ， 如 图 6-10 所 示 。 


[ 国 柄 间 四 层 (0 类 型 VY) 选择 (9 涉 镜 视图 (V 窗口 WW) 


位 图 (B) 
灰 度 (G) 
J » 
ee 一 一 - | “双色 调 (D) 
目 动 色 油 (N) Shift+Ctrl+L 要 引 若 色 (0 
自动 对 比 度 (U) At+Shift+Ctrl+L | w RGB 产 色 (R) 
户 动 问 色 (O 〇 ) Shift+Ctrl+B 
图 像 大 小 (1)... Alt+Ctrl+1 | Lab 基色 (D 
画布 大 小 (S)... Akt+Ctrl+C | ”多 通道 (M) 
裁 莫 (P) 16 位 /通道 (N) 
ta 32 位 /通道 (H) 
显示 全 部 (V) 
基 色 囊 (T)... 
复制 (D).… 
应 用 图 像 (Y)… 
计算 (C).. 
变量 (B) 
应 用 数据 组 ()... 
陷 印 人 mT)... 
分 析 {A) » 
> < 2 \ ee br 77 人 
6-9 打开 素材 图 像 6-10 选择 “CMYK 颜色 ”命令 


元 河 03| 弹出 信息 提示 框 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 将 图 像 转 换 为 CMYK 模式 ， 效 果 
如 图 6-11 所 示 。 
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图 6-11 图 像 转换 为 CMYK 模式 


一 幅 彩 色 图 像 不 能 多 次 在 RGB 与 CMYK 模式 之 间 转 换 ， 因 为 每 一 次 转换 前 会 损失 
图 像 颜色 质量 。 


3. 转换 为 灰 度 模式 

灰 度 模式 的 图 像 不 包含 颜色 ， 其 中 的 每 个 像素 都 有 一 个 0( 黑色 ) ~ 255( 白色 ) 之 间 的 亮 
度 值 。 

在 Photoshop CC 中 ， 当 用 户 需 要 将 移动 UI 图 像 转换 为 灰 度 模式 时 ， 可 以 选择 菜单 栏 中 
的 “图 像 ”|“ 模 式 ”|“ 灰 度 ” 命 令 ， 如 图 6-12 所 示 。 


国 四 时 (U， 关 型 选择 (9 浅 壮 视图 。 瘟 口 [W 


涂 灿烂 阳光 航空 


| -| 双色 调 (D) 
自动 色调 IN) Shift+Ctri+L 泰 引 颜色 人 D).. 
自动 对 比 度 (U) Alt+Shift+Ctrl+L |y RGB 
自动 瞻 色 (O) Shift+Ctrl+B CMYK 
图 像 大 小 (1).. Ak+Ctrl+1 | Lab 着 色 (D 
画布 大 小 (S).。 Ak+Ctrl+C | ”多 通道 (M) 
图 像 旋转 (G) ”| v 8 位 /通道 (A) 
裁 身 (p) 16 位 /通道 (N) 
我 切 (R)… 32 位 /通道 (H) 


星 示 全 部 (V) 
复制 (D)... 

应 用 图 像 (V).. 
计算 (C).. 
变量 (B) 
应 用 数据 组 (L)... 
隐 印 人 m)... 


分 析 (A) 


| ”着色 表 人 Tm).. 


图 6-12 选择 “ 灰 度 ”命令 
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执行 上 述 操 作 后 ， 弹 出 信息 提示 框 ， 单 击 “ 扔 掉 ” 按 钮 ， 如 图 6-13 所 示 ， 即 可 将 图 像 转 
换 为 灰 度 模式 ， 效 有 果 如 图 6-14 所 示 。 


浪 灿烂 阳光 航空 


图 6-13 ”信息 提示 框 图 6-14 图 像 转换 为 灰 度 模式 


4. 转换 为 多 通道 模式 

多 通道 模式 与 CMYK 模式 类 似 ， 也 是 一 种 减 色 模 式 。 将 RGB 模式 图 像 转换 为 多 通道 模 
式 后 ， 可 以 得 到 青色 、 详 红 和 黄色 3 个 专 色 通 道 ， 由 于 专 色 通 道 的 不 同 特性 以 及 多 通道 模式 
区 别 于 其 他 通道 的 特点 ， 所 以 专 色 通道 可 以 组 合 出 各 种 不 同 的 特殊 效果 。 


此 外 ， 在 RGB、CMYK、Lab 模式 中 ， 如 果 删 除 某 个 颜色 通道 ， 图 像 就 会 自动 转换 
为 多 通道 模式 。 
在 Photoshop CC 中 , 用户 可 以 根据 需要 ， 转 换 移 动 UI 图 像 为 多 通道 模式 ， 只 要 选择 “图 
像 ”|“ 模 式 ”|“ 多 通道 ”命令 即 可 。 图 6-15 所 示 为 转换 多 通道 模式 前 后 的 对 比 效果 。 


4:20 PM = I 广 二 


图 6-15 ”转换 图 像 为 多 通道 模式 的 前 后 对 比 歼 果 
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专家 指点 》) 


双色 模式 通过 1 一 4 种 自 定 油 墨 创建 单 色 调 、 双 色调 、 三 色调 和 四 色调 的 灰 度 图 像 ， 
如 果 布 望 将 彩色 图 像 模式 转换 为 双色 调 模式 ， 则 必须 先 将 图 像 转 换 为 灰 度 模式 ， 再 转换 
为 双色 调 模 式 。 


6.1.6 ” 色 域 沁 围 的 识别 OD 


在 移动 UI 图 像 设 计 中 ， 获 得 一 张 好 的 扫描 图 像 是 所 有 工作 的 良好 开端 ， 因 此 ， 在 扫描 
素材 图 像 前 ， 很 有 必要 对 素材 图 像 进行 色 域 范 围 的 识别 操作 ， 更 宽广 的 色 域 范围 可 以 获得 更 
加 多 姿 多 彩 的 源 素 材 图 像 。 

1. 预览 RGB 模式 里 的 CMYK 颜色 

运用 “ 校 样 颜色 ”命令 ， 可 以 不 用 将 移动 UI 图 像 转换 为 CMYK 模式 就 可 看 到 转换 之 后 

在 Photoshop CC 中, 可 以 根据 需要 , 预览 RGB 颜色 模式 里 的 CMYK 颜色, 选择 “视图 ”1“ 校 
样 颜色 ”命令 ， 即 可 预览 RGB 颜色 模式 里 的 CMYK 颜色 ， 如 图 6-16 所 示 。 

2. 识别 图 像 色 域外 的 颜色 

“ 色 域 范围 ”是 指 颜色 系统 可 以 显示 或 打印 的 颜色 范围 。 可 以 在 将 移动 UI 图 像 转换 为 
CMYK 模式 之 前 ， 先 识别 出 图 像 中 的 洲 色 部 分 ， 并 手动 进行 校正 。 

在 Photoshop CC 中 , 使 用 “ 色 域 警告 ”命令 即 可 高 亮 显 示 洲 色 。 选择 “视图 | 色 域 警告 

命令 ， 即 可 识别 图 像 色 域外 的 颜色 ， 如 图 6-17 所 示 。 


Welcome Welcome 


手机 号 /邮箱 /账号 对 机 号 / 却 箱 / 同 久 


图 6-16 预览 RGB 颜色 模式 里 的 CMYK 颜色 
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图 6-17 识别 图 像 色 域外 的 颜色 


6.2 ” 目 动 调 色 : 目 动 校正 移动 U1 图 像 色 彩 


在 调整 移动 UI 图 像 的 色彩 时 ， 可 以 通过 “自动 颜色 ”“ 自 动 色调 ”等 命令 来 快速 实现 。 
本 市 主要 介绍 自动 校正 移动 UI 图 像 色彩 的 操作 方法 。 


6.2.1 “自动 色调 ”命令 DO 


在 调整 移动 UI 图 像 的 色彩 时 ，“ 自 动 色调 ”命令 可 以 根据 图 像 整 体 颜色 的 明暗 程度 进 
行 自 动 调整 ， 使 亮 部 与 暗部 的 颜色 按 一 定 的 比例 分 布 。 
下 面 介绍 运用 “自动 色调 ”命令 调整 移动 UI 图 像 的 操作 方法 。 


6. 2. 1 内 容 
请 打 二 维 码 


p 建 汝 01| 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-18 所 示 。 
逐 浏 02| 选择 “图 像 ”|“ 自 动 色调 ”命令 , 即 可 自动 调整 图 像 色调 , 效果 如 图 6-19 所 示 。 


在 Photoshop CC 中 ，“ 自 动 色调 ”命令 对 于 色调 丰富 的 图 像 相 当 有 用 ， 而 对 于 色调 
单一 的 图 像 或 色彩 不 丰富 的 图 像 几乎 不 起 作用 ， 除 了 使 用 命令 外 ， 还 可 以 按 Ctrl+Shift+L 
组 合 键 ， 自 动 调整 图 像 色 调 。 
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图 6-18 ”打开 素材 图 像 图 6-19 自动 调整 图 像 的 色调 
6.2.2 “自动 对 比 度 ” 命令 OY 
在 调整 移动 UI 图 像 的 色彩 时 ， 使 用 “自动 对 比 度 ” 命 令 可 以 自动 调节 图 像 整 体 的 对 比 
度 和 混合 颜色 。 


下 面 介 绍 运用 “自动 对 比 度 ” 命 令 调整 移动 UI 图 像 的 操作 方法 。 


6. 2.2 内 容 
请 扫 二 维 码 


天 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-20 所 示 。 
到 河 02| 选择 “图 像 ”|“ 自 动 对 比 度 ” 命 令 ， 系 统 即 可 自动 对 图 像 对 比 度 进 行 调 整 ， 
效果 如 图 6-21 所 示 。 


图 6-20 ”打开 素材 图 像 图 6-21 自动 凋 整 图 像 对 比 度 
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“自动 对 比 度 ” 命 令 会 自动 将 图 像 最 深 的 颜色 加 强 为 黑色 ,最 亮 的 颜色 加 强 为 白色 ， 
以 增强 图 像 的 对 比 度 ， 此 命令 对 于 连续 调 色 的 图 像 效 果 相当 明显 ， 而 对 于 单 色 或 颜色 不 


丰富 的 图 像 几乎 不 产生 作用 。 
6.2.3 “自动 颜色 ”命令 J 


调整 移动 UI 图 像 的 色彩 时 ， 使 用 “自动 颜色 ”命令 可 以 自动 识别 图 像 中 实际 的 阴影 、 
中 间 调 和 高 区， 从 而 对 图 像 的 颜色 进行 自动 校正 。 若 图 像 有 偏 色 与 饱和 度 过 高 的 现象 ， 使 用 
该 命令 则 可 以 进行 自动 调整 ， 如 图 6-22 所 示 。 


星巴克 用 星 说 » © 星巴克 用 星 说 


水 三 扣 昌 


嘎 啡 + 祝福 即刻 表 心 意 


图 6-22 ”自动 校正 图 像 的 颜色 前 后 对 比 效果 


下 面 详细 介绍 运用 “自动 颜色 ”命令 调整 移动 UI 图 像 的 操作 方法 。 


6. 2. 3 内 容 
请 扫 二 维 码 


选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-23 所 示 。 
在 “图 层 ”面板 中 ， 选 择 “ 背 景 ” 图 层 ， 如 图 6-24 所 示 。 

选择 “图 像 ”|“ 自 动 颜色 ”命令 ， 如 图 6-25 所 示 。 
执行 上 述 操作 后 ， 即 可 自动 校正 图 像 的 颜色 ， 如 图 6-26 所 示 。 
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P 类 型 ?| 回 @TITESBgm 日 


正常 | 不 透明 度 : |100% | > 
BE uo%| = 


c fk 四 ©. 和 


6-23 ”打开 素材 图 像 


用 整理 来 浦 剖 人 和 障碍 


你 四 中 图 层 (L) 类 型 (Y) 选择 (S) j 
模式 (M) 
调整 () 


自动 色调 (N) Shift+Ctrl+L 
自动 对 比 度 (U) Alt+Shift+Ctrl+L 


人 


圣 柜 想 理 


6-25 ”选择 “自动 颜色 ”命令 图 6-26 ”自动 校正 图 像 颜 色 


6.3 ”色调 调整 : 调整 移动 UI 图像 的 影 调 


关于 移动 UI 图 像 影 调 的 基本 调整 ， 本 节 主 要 介绍 使 用 “ 色 阶 “亮度 /对比 度 “曲线 - 
以 及 “上 曝光 度 ” 命 令 。 
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6.3.1 色 阶 ”命令 JU 

色 阶 ”是 指 图 像 中 的 颜色 或 颜色 中 的 某 一 个 组 成 部 分 的 亮度 范围 。 在 调整 移动 UI 图 
像 的 色彩 时 运用 “ 色 阶 ”命令 ， 通 过 调整 图 像 的 阴影 、 中 间 调 和 高 光 的 强度 级 别 ， 校 正 图 像 
的 色调 范围 和 色彩 平衡 。 选 择 “ 图 像 |“ 调整 |“ 色 阶 ”命令 ， 弹 出 “ 色 阶 ”对 话 框 ， 如 
图 6-27 所 未。 


1 


py a : 
IC 一 芋 一 


图 6-27 “ 色 阶 ”对 话 框 

“ 色 阶 ”对 话 框 中 各 项 的 主要 含义 如 下 。 

革 预 设 : 单 击 “ 预 设 ”选项 按钮 ， 在 弹出 的 列表 框 中 选择 “存储 预 设 ”选项 ， 可 以 将 当 
前 的 调整 参数 保存 为 一 个 预 设 的 文件 。 

加 通道 : 可 以 选择 一 个 通道 进行 调整 ， 对 于 通道 调整 会 影响 图 像 的 颜色 。 

基 输 入 色 阶 ， 用 来 调整 图 像 的 阴影 、 中 间 调 和 高 光 区 域 。 

四 I 输出 色 阶 ， 可 以 限制 图 像 的 亮度 范围 ， 从 而 降低 对 比 度 ， 使 图 像 呈 现 褪色 效果 。 

如 自动 : 单 击 该 按钮 ， 可 以 应 用 自动 颜色 校正 ，Photoshop CC 会 以 0.5% 的 比例 自动 调 
整 图 像 的 色 阶 ， 使 图 像 的 亮度 分 布 更 加 均匀 。 

中 选项: 单 击 该 按钮 ， 可 以 打开 “自动 颜色 校正 选项 ”对 话 框 ， 在 该 对 话 框 中 可 以 设置 
“阴影 ”和 “高 光 ” 的 剪 切 百分比 比例 。 

台 目 在 图 像 中 取样 以 设置 黑 场 : 使 用 该 工具 在 图 像 中 单 击 ， 可 以 将 单 击 点 的 像素 调整 为 黑 
色 ， 原 图 中 比 该 点 亮度 低 的 像素 也 变 为 黑色 。 

区 在 图 像 中 取样 以 设置 灰 场 : 使 用 该 工具 在 图 像 中 单 击 ， 可 以 根据 单 击 点 像素 的 亮度 来 
调整 其 他 中 间 色 调 的 平均 亮度 ， 通 常用 来 校正 色 偏 。 

加 在 图 像 中 取样 以 设置 白 场 : 使 用 该 工具 在 图 像 中 单 击 ， 可 以 将 单 击 点 的 像素 调整 为 白 
色 ， 原 图 中 比 该 点 亮度 值 高 的 像素 也 都 会 变 为 白色 。 

下 面 详细 介绍 运用 “ 色 阶 ” 命 令 调整 移动 UI 图 像 的 操作 方法 。 
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去 ;党 01 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-28 所 示 。 
2 天河 02 选择 “背景 ”图 层 ， 选 择 “ 图 像 ”|“ 调 整 ”|“ 色 阶 ”命令 ， 如 图 6-29 所 示 。 


cy -人 
bm et | wks 


立即 报名 ， 


:; 你 有 机 会 得 到 ? 
热门 机 会 现金 英 励 


图 6-28 打开 素材 图 像 图 6-29 ”选择 “ 色 阶 ”命令 


g 邓 中 03| 弹出 “ 色 阶 ”对 话 框 , 设置 “输入 色 阶 ”的 各 参数 值 为 94、1.00、239, 如 图 6-30 
所 示 。 
池河 04| 单 击 “ 确 定 ” 按 钮 ， 即 可 调整 图 像 的 亮度 范围 ， 效 果 如 图 6-31 所 示 。 


预 设 (E): 丘 定 


通道 (C): RGB 
输入 色 阶 (]): 


OO@e® 


热门 机 会 频道 推荐 棕 攻 入 天 现金 奖励 


图 6-30 设置 相应 参数 图 6-31 图 像 效 果 
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6.3.2 “亮度 / 对比度” 命令 JU 


在 调整 移动 UI 图 像 的 色彩 时 ， 使 用 “亮度 /对比度 ”命令 可 以 对 图 像 的 色彩 进行 简单 的 
调整 , 该 命令 对 图 像 的 每 个 像素 都 进行 同样 的 调整 。 亮度 /对 比 度 命令 对 单个 通道 不 起 作用 ， 
所 以 该 调整 方法 不 适用 于 高 精度 输出 。 选 择 “ 图 像 | 调整 | 亮度 /对 比 度 ”命令 , 弹出 “ 亮 
度 / 对 比 度 ”对 话 框 ， 如 图 6-32 所 示 。 


中 使 用 | 旧版 (L) 团 预 览 (P) 


图 6-32 亮度/ 对比度 ”对 话 框 
“亮度 / 对比度 ”对 话 框 中 各 项 的 主要 含义 如 下 。 
四 亮度 : 用 于 调整 图 像 的 亮度 , 该 值 为 正 时 增加 图 像 亮 度 , 该 值 为 负 时 降低 图 像 的 亮度 。 
攻 对 比 度 用 于 调整 图 像 的 对 比 度 ,该 值 为 正 时 增加 图 像 对 比 度 ,该 值 为 负 时 降低 对 比 度 。 
下 面 详细 介绍 运用 “亮度 / 对比度” 命令 调整 移动 UI 图 像 的 操作 方法 。 


Ole 必 
sy 上 


pe 王 浊 01| 选择 “文件 ” |“ 打开” 命令， 打开 一 幅 素材 图 像 ， 如 图 6-33 所 示 。 
2 碗 潭 02| 选择 “图 像 ”|“ 调 整 ”|“ 亮 度 /对比 度 ” 命 令 ， 弹 出 “亮度 / 对比度” 对话 框 ， 
设置 “亮度 ”为 18、“ 对 比 度 ” 为 100， 如 图 6-34 所 示 。 


云南 
2248 24 hm 


趾 使 用 | 旧版 (LD) 时 预览 (P) 


图 6-33 打开 素材 图 像 图 6-34 设置 相应 参数 


a 


有 


Photoshop™= 一 二 > 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


p 台 5 当 03| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 效 果 如 图 6-35 所 示 。 


云南 — 
2248 24 ma 
吉 羡 站 和 错 详 情 
面 雨量 24mnrr 


图 6-35 ”最终 效果 


6.3.3 “曲线 ”命令 OD 


“曲线 ”命令 是 功能 强大 的 图 像 校正 命令 ， 该 命令 可 以 在 图 像 的 整个 色调 范围 内 调整 不 
同 的 色调 ， 还 可 以 对 图 像 中 的 个 别 颜色 通道 进行 精确 的 调整 。 
调整 移动 UI 图像 的 色彩 时 , 可 以 使 用 “曲线 ”命令 只 针对 一 种 色彩 通道 的 色调 进行 处 理 ， 
而 且 不 影 啊 其 他 区 域 的 色调 。 选 择 “ 图 像 ”|“ 调 整 ”|“ 曲 线 ” 命 令 ， 弹 出 “曲线 ”对 话 框 ， 
如 图 6-36 所 示 。 


| 显示 甫 旦 :” 回 光 (0-255)(L) 下 
日 疡 料 / 油 圣 %(6) OE 
显示 : 财 通 遵 天 加 (V) ” 同 基 线 (8) 
同 直 方 图 (H) 。 园 交 叉 线 (N) 


图 6-36 “曲线 ”对 话 框 
“曲线 ”对 话 框 中 各 项 的 主要 含义 如 下 。 
四 预 设 : 包含 了 Photoshop CC 提供 的 各 种 预 设 调整 文件 ， 可 以 用 于 调整 图 像 。 
加 通道 : 在 其 列表 框 中 可 以 选择 要 调整 的 通道 ， 调 整 通道 会 改变 图 像 的 颜色 。 


i 
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加 编辑 点 以 修改 曲线 : 该 按钮 通常 为 选中 状态 ， 此 时 在 曲线 上 单 击 鼠标 左 键 可 以 添加 新 
的 控制 点 ， 拖 动 控制 点 改变 曲线 形状 即 可 调整 图 像 。 

区 通过 绘制 来 修改 曲线 : 单 击 该 按钮 后 ， 可 以 绘制 手绘 效果 的 自由 曲线 。 

四 输出 /输入 : “输入 ” 色 阶 显示 的 是 调整 前 的 像素 值 ，“ 输 出 ” 色 阶 显示 的 是 调整 后 
的 像素 值 。 

中 在 图 像 上 单 击 并 拖 动 可 修改 曲线 : 单 击 该 按钮 后 ， 将 鼠标 指针 放 在 图 像 上 ， 曲 线 上 会 
出 现 一 个 圆 形 图 形 ， 它 代表 鼠标 指针 处 的 色调 在 曲线 上 的 位 置 ， 在 图 像 中 单 击 并 拖 动 鼠标 指 
针 可 以 添加 控制 点 并 调整 相应 的 色调 。 

有 生平 请 : 使 用 铅笔 绘制 曲线 后 ， 单 击 该 按钮 ， 可 以 对 曲线 进行 平滑 处 理 。 

EE 国 自动 : 单 击 该 按钮 ， 可 以 对 图 像 应 用 “自动 颜色 ”“ 自 动 对 比 度 ” 或 “自动 色调 ” 校 
正 。 具 体 校正 内 容 取 决 于 “自动 颜色 校正 选项 ”对 话 框 中 的 设置 。 

图 选 项: 单 击 该 按钮 ， 可 以 打开 “自动 颜色 校正 选项 ”对 话 框 ， 自 动 颜色 校正 选项 用 来 
控制 由 “ 色 阶 ”和 “曲线 ”中 的 “自动 颜色 ”“ 自 动 色调 ”“ 自 动 对 比 度 ” 和 “自动 ”选项 
应 用 的 色调 和 颜色 校正 ， 它 人 允许 指定 “阴影 ”和 “高 光 ” 的 剪 切 百分比 ， 并 为 阴影 、 中 间 调 
和 高 光 指 定 颜色 值 。 

下 面 介绍 运用 “曲线 ”命令 调整 移动 UI 图 像 色调 的 操作 方法 。 


过 河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-37 所 示 。 
列 河 02| 选择 “图 像 ”|“ 调 整 ”|“ 曲 线 ” 命 令 ， 弹 出 “曲线 ”对 话 框 ， 在 调节 线 上 添 
加 一 个 控制 点 ， 设 置 “输出 ”和 “输入 ”的 参数 值 分 别 为 158、175， 如 图 6-38 所 示 。 


三 。 周末 出 游 ( 样 例 帐 本 县 | 


门票 费 娱乐 费 
住宿 费 
餐饮 费 
费 

@ 餐饮 费 共计 ¥228.00 占 20.35% 
@ 交通 费 共计 ¥112.50 占 10.04% | 
| 

| 

| 


O 


”2 回归 示 作 前 (W) 


@ 住宿 费 共计 ¥280.00 占 24.99% 
蜡 示 教 量 : ”加 光 (0-255)(L) 器 | 图 
人 颜料 / 油 里 %(6) 
显示 :| 团 通 肖 肥 加 (V) 。 回 基线 (B) 
团 直 方 图 (H) 。 ” 团 交 叉 线 (N) 


@ 门票 费 共计 ¥180.00 占 16.06% 


和 


Te OO OO Ms 


| 


图 6-37 打开 素材 图 像 图 6-38 设置 相应 参数 
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于 当 03| 单 击 “ 确 定 ” 按 钮 ， 即 可 调整 图 像 色调 ， 效 果 如 图 6-39 所 示 。 


周 未 出 游 ( 样 例 帐 本 ) w .和夫 


@ 餐饮 费 共计 ¥228.00 占 20.35% 
@ 交通 费 共计 ¥112.50 占 10.04% 
@ 住宿 费 共计 ¥280.00 占 24.99% 
s 门票 费 共计 ¥180.00 占 16.06% 
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图 6-39 最终 效 果 


按 CHl+M 组 合 键 ， 可 以 快速 弹出 “曲线 ” 对话 框 。 另 外 ， 按 住 Alt 键 的 同时 ， 在 对 
话 框 的 网 格 中 单 击 筷 标 左 键 ， 网 格 将 转换 为 10x10 的 显示 状态 ; 再 次 按 住 Alt 键 的 同时 
单 击 息 标 左 键 ， 即 可 恢复 至 默认 的 4X4 的 显示 状态 。 


6.3.4 “了 曝光 度 ” 命 令 JU 

在 拍摄 移动 UI 的 素材 照片 过 程 中 ， 经 常会 因为 曝光 不 足 或 曝光 过 度 影响 图 像 的 效果 ， 
运用 “ 虐 光 度 ” 命 令 可 以 快速 解决 图 像 的 曝光 问题 。 选 择 “ 图 像 ”| “调整 | 明光 度 ” 命 令 ， 
弹出 “曝光 度 ” 对 话 框 ， 如 图 6-40 所 示 。 


| Xx 


| 预 设 (R): 默认 什 ~ 到 


图 6-40 “曝光 度 ” 对 话 框 
“曝光 度 ” 对 话 框 中 各 选项 的 主要 含义 如 下 。 
加 预 设 ， 可 以 选择 一 个 预 设 的 曝光 度 调 整 文件 。 
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加 曝光 度 : 调整 色调 范围 的 高 光 端 ， 对 极限 阴影 的 影响 很 轻微 。 

E 国 位 移 : 使 阴影 和 中 间 调 变 暗 ， 对 高 光 的 影响 很 轻微 。 

E 国 灰 度 系数 校正 :使 用 简单 乘 方 函 数 调整 图 像 的 灰 度 系数 ， 可 以 更 改 高 亮 区 域 的 图 像 
颜色 。 

下 面 介绍 运用 “曝光 度 ” 命 令 调整 移动 UI 图 像 的 操作 方法 。 


2 弄 湖 01| 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 如 图 6-41 所 示 。 
2 型 尖 02| 选择 “图 层 1” 图 层 ， 选 择 “ 图 像 ”|“ 调 整 ”|“ 曝 光度 ”命令 ， 弹 出 “曝光 度 ” 
对 话 框 , 设置 “曝光 度 为 1.3, 单 击 “ 确 定 ” 按 钮 , 即 可 调整 图 像 蚂 光度 , 效果 如 图 6-42 所 示 。 


a 减肥 指数 人 福 售 合 (a 减肥 指数 寅 祝 售 


图 6-41 打开 素材 图 像 图 6-42 最 终 戏 果 
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7.1 文子 排列 : 擎 握 移动 U1 中 文字 的 排列 


在 移动 UI 设计 中 ， 文 字 是 多 数 设 计 作品 尤其 是 商业 作品 中 不 可 或 缺 的 重要 元 素 ， 有 时 
其 至 在 其 中 起 着 主导 作用 。Photoshop 除了 提供 丰富 的 文字 属性 设计 及 版 式 编排 功能 外 ， 还 允 
许 对 文字 的 形状 进行 编辑 ， 以 便 制作 出 更 多 、 更 丰富 的 文字 效果 。 

本 节 主 要 介绍 在 移动 UI 中 输入 文字 的 操作 方法 。 


7.1.1 常见 文字 类 型 | 
在 移动 UI 设计 过 程 中 ， 对 文字 进行 艺术 化 处 理 是 Photoshop 的 强项 之 一 。 在 将 文字 栅 格 
化 之 前 ，Photoshop 会 保留 基于 矢量 的 文字 轮廓 ， 可 以 任意 缩放 文字 或 调整 文字 大 小 而 不 会 产 
生 锯 齿 。 
Photoshop 提供 了 4 种 文字 类 型 ,主要 包括 : 横 排 文字 、 直 排 文字 、 段 落 文 字 和 选区 文字 ， 
如 图 7-1 所 示 。 


图 7-1 移动 UI 的 文字 类 型 


7.1.2 文字 属性 设置 DO 


在 移动 UI 图 像 中 输入 文字 之 前 ,首先 需要 在 工具 属性 栏 或 “字符 ?面板 中 设置 字符 的 属性 ， 
包括 字体 、 字 体 大 小 以 及 文字 颜色 等 。 

选取 工具 箱 中 的 文字 工具 ， 其 工具 属性 栏 如 图 7-2 所 示 。 

文字 工具 的 工具 属性 栏 中 各 选项 的 主要 含义 如 下 。 

国 国 切换 文本 取向 : 如 果 当前 文字 为 横 排 文字 ， 单 击 该 按钮 ， 即 可 将 其 转换 为 直 排 文字 ， 
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如 果 文 字 为 直 排 文字 ， 单 击 该 按钮 即 可 将 其 转换 为 横 排 文字 ， 如 图 7-3 所 示 。 
i 


wa ee | [| 加 


图 7-2 文字 工具 属性 栏 


钢 频 直播 


横 排 


图 7-3 直 排 与 横 排 的 文字 效果 


加 设置 字体 : 在 该 选项 列表 框 中 ， 用 户 可 以 根据 需要 选择 不 同 的 字体 。 

EE 国 字体 样式 : 为 字符 设置 样式 , 包括 字 距 调整 、Regular( 规则 的 )、Ltalic( 斜体 )、Bold( 粗 
体 ) 和 Bold Ltalic( 粗 斜 体 )， 该 选项 只 对 部 分 英文 字体 有 效 。 图 7-4 所 示 为 设置 文本 字体 样 
式 前 后 的 对 比 效果 。 


Ce =- 
looing... 


客 官 稍 等 。 © 9 容 客 稍 答 。 © 9 


图 7-4 设置 文本 字体 样式 
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四 字体 大 小 型 : 可 以 选择 字体 的 大 小 ， 或 者 直接 输入 数值 来 进行 调整 。 

国 jj 消 除 锯 齿 的 方法 国 : 可 以 为 文字 消除 锯齿 选择 一 种 方法 ，Photoshop CC 会 通过 部 分 
填充 边缘 像素 来 产生 边缘 平滑 的 文字 ， 使 文字 的 边缘 混合 到 背景 中 而 看 不 出 锯齿 。 

国文 本 对 齐 夯 : 根据 输入 文本 时 光标 的 位 置 来 设置 文本 的 对 齐 方式 ， 包 括 左 对 齐 文 本 、 
居中 对 齐 文本 和 右 对 齐 文 本 。 

国文 本 颜色 口 ]: 单 击 颜色 块 , 可 以 在 弹出 的 “ 拾 色 器 ”对 话 框 中 设置 文字 的 颜色 。 图 7-5 
所 示 为 设置 文字 颜色 前 后 的 对 比 效果 。 


图 7-5 设置 文字 的 颜色 
国文 本 变形 轴 : 单 击 该 按钮 后 ， 可 以 在 弹出 的 “变形 文字 ”对 话 框 中 为 文本 添加 变形 样 
式 ， 创 建 变形 文字 。 
国 四 显示 /隐藏 字符 和 有 段落 面板 国 ， 单 击 该 按钮 ， 可 以 显示 或 隐藏 “字符 ”面板 和 “段落 ” 
面板 。 


不 仅 可 以 在 工具 属性 栏 中 设置 文字 的 字体 、 字 号 、 文 字 颜 色 以 及 文字 样式 等 属性 ， 
还 可 以 在 “字符 ”面板 中 设置 文字 的 各 种 属性 。 


7.1.3 _ 模 排 文字 输入 | 


横 排 文字 是 一 个 水 平 的 文本 行 ， 每 行文 本 的 长 度 随 着 文字 的 输入 而 不 断 增 加 ， 但 是 不 会 
换行 。 在 设计 移动 UI 图 像 时 ， 输 入 横 排 文字 的 方法 很 简单 ， 使 用 工具 箱 中 的 横 排 文字 工具 
或 横 排 文字 蒙 版 工具 ， 即 可 在 图 像 编 辑 窗口 中 输入 横 排 文字 。 
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下 面 详细 介绍 运用 横 排 文字 工具 输入 横 排 移动 UI 图 像 文字 的 操作 方法 。 


2 型 河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 7-6 所 示 。 
2 弄 河 02| 选择 工具 箱 中 的 横 排 文 字 工具 ， 如 图 7-7 所 示 。 


PSY7 国 Se 


时 
好 


7-6 打开 素材 图 像 图 7-7 ”选取 横 排 文字 工具 


将 鼠标 指针 移 至 适当 位 置 , 在 图 像 上 单 击 鼠标 左 键 , 确定 文字 的 插入 点 , 在 “ 字 
符 ” 面 板 中 设置 “字体 系列 ”为 “ 文 卢 中 特 广告 体 ”、“ 字 体 大 小 ”为 “36 后 ”、 “颜色 - 
为 白色 (RGB 参数 值 分 别 为 255、255、255)， 如 图 7-8 所 示 。 

在 图 像 中 输入 相应 的 文字 , 单 击 工具 属性 栏 右 侧 的 “提交 所 有 当前 编辑 ”按钮 ， 
即 可 完成 横 排 文字 的 输入 操作 ， 然 后 将 文字 移 至 合适 位 置 ， 效 果 如 图 7-9 所 示 。 


字符 
[X 和 性 广 -| 出 四 
到 [3 点 |-] 纵 lao 点 | -| 
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图 7-8 设置 字符 属性 
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专家 指点 》) 


在 Photoshop CC 中 ， 在 英文 输入 法 状态 下 ， 按 工 键 ， 可 以 快速 切换 至 横 排 文字 工具 ， 
然后 在 图 像 编辑 窗口 中 输入 相应 文本 内 容 即 可 。 如 果 输 入 的 文字 位 置 不 能 满足 需求 ， 可 
以 通过 移动 工具 将 文字 移动 到 相应 位 置 。 


7.1.4 直 排 文字 输入 J 


在 设计 移动 UI 图 像 时 ， 选 取 工 具 箱 中 的 直 排 文字 工具 或 直 排 文字 蒙 版 工具 ， 将 鼠标 指 
针 移动 到 图 像 编 辑 窗 口中 ， 单 击 鼠标 左 键 确定 插入 氮 ， 在 图 像 中 出 现 内 烁 的 光标 之 后 ， 即 可 
输入 直 排 文字 ， 如 图 7-10 所 示 。 


‘2 


oe )) 
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图 7-10” 直 排 文字 效果 
直 排 文字 是 一 个 垂直 的 文本 行 ， 每 行文 本 的 长 度 随 着 文字 的 输入 而 不 断 增加 ， 但 是 不 会 
换行 。 
下 面 详 细 介 绍 运 用 直 排 文字 工具 在 移动 UI 图 像 中 输入 直 排 文字 的 操作 方法 。 
去; 河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 7-11 所 示 。 
天 02 选取 工具 箱 中 的 直 排 文字 工具 ， 如 图 7-12 所 示 。 
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图 7-11 打开 素材 图 像 图 7-12 选取 直 排 文字 工具 


将 鼠标 指针 移 至 适当 位 置 , 在 图 像 中 单 击 鼠 标 左 键 , 确定 文字 的 插入 点 , 在 “ 字 
符 ” 面 板 中 ， 设 置 “ 字 体系 列 ” 为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “20 点 ”、“ 文 本 颜色 ” 
为 白色 (RGB 参数 值 分 别 为 255、255、255)， 如 图 7-13 所 示 。 

在 图 像 中 输入 相应 文字 ， 单 击 工具 属性 栏 右 侧 的 “提交 所 有 当前 编辑 ”按钮 ， 
即 可 完成 直 排 文字 的 输入 操作 ， 并 将 文字 移 至 合适 位 置 ， 效 果 如 图 7-14 所 示 。 
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图 7-13 设置 字符 属性 图 7-14 最终 效果 
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7.1.5 段落 文 字 输 入 oD| 


段落 文字 是 一 类 以 段落 文字 定 界 框 来 确定 文字 的 位 置 与 换行 情况 的 文字 。 图 7-15 所 示 为 
段 洛 文 字 效 采 。 


9 专家 点 2 


在 Photoshop CC 中 ， 当 改变 段落 文字 的 定 界 框 时 ， 定 界 框 中 的 文本 会 根据 定 界 框 的 
位 置 自动 换行 。 
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300 多 种 构图 细 分 , 原创 + 首创 
京东 , 干 聊 、 湖 南 芒 果 撮 影 讲师 。 
清华 大 学 、 人 民 郎 电 社 特约 作家 。 


清华 大 学 、 人 民 邮 电 社 特约 作家 


开 这 个 微 店 , 为 买书 不 方便 的 摄 友 服 务 , 购买 之 后 , 可 以 与 
作者 直接 沟通 交流 , 微 信 ~157075539。 


开 这 个 丛 店 , 为 买书 不 方便 的 担 友 服务 , 购买 之 后 ， 
作者 直接 沟通 交流 , 微 信 ~157075539。 
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店铺 首页 全 部 商品 新 品 上 架 
1 摄影 构图 1 摄影 构图 
:G @ OO :a © S 
分 类 发 现 联系 卖家 收藏 分 类 发 现 联系 卖家 收藏 


图 7-15 段落 文字 效果 
下 面 详细 介绍 运用 横 排 文 字 工具 在 移动 UI 图 像 中 制作 段落 文字 效果 的 操作 方法 。 


二 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 7-16 所 示 。 
元 河 02| 选择 工具 箱 中 的 横 排 文字 工具 ， 在 图 像 窗 口中 的 合适 位 置 创建 一 个 定 界 框 ， 如 
图 7-17 所 示 。 


p 妇 当 03| 在 “字符 ”面板 中 , 设置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “4 点 ”、 
“文本 颜色 ”为 黑色 (RGB 参数 值 均 为 )， 如 图 7-18 所 示 。 


二 04| 在 图 像 中 输入 相应 文字 ， 单 击 工具 属性 栏 右 侧 的 “提交 所 有 当前 编辑 ”按钮 ， 
即 可 完成 段落 文字 的 输入 操作 ， 并 将 文字 移 至 合适 位 置 ， 效 果 如 图 7-19 所 示 。 
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朋友 们 如 果 还 有 更 多 更 好 的 建议 可 以 给 构图 君 留言 


哦 “构图 君 每 一 条 都 会 看 的 朋友 们 如 果 还 有 更 多 更 好 的 建议 可 以 给 构图 君 留言 
一 条 都 会 ! 


哦 ， 构 图 君 每 一 条 都 会 看 的 ! 


赶快 关注 : 赶快 关注 
向 摄影 技术 再 精进 一 点 ; 向 摄影 技术 再 精进 一 点 
阅读 原文 阅读 26800 恬 11666 投诉 阅读 原文 阅读 26800 由 11666 投诉 


图 7-17 创建 定 界 框 


心 悦 目 。 


朋友 们 如 果 还 有 更 多 更 好 的 建议 可 以 给 构图 君 留言 
哦 ， 构 图 君 每 一 条 都 会 看 的 ! 


构图 专家 ， 垂 直 细 分 第 一 人 


原创 300 篇 文章 ， 总 结 了 500 多 种 构图 


赶快 关注 
向 摄影 技术 再 精进 一 点 
阅读 原文 阅 i 00 内 116 
图 7-18 设置 字符 属性 图 7-19 最 终 效 果 


7.1.6 ”选区 文字 输入 | 


在 设计 移动 UI 图 像 时 ， 运 用 工具 箱 中 的 横 排 文字 蒙 版 工具 和 直 排 文字 蒙 版 工具 ， 可 以 
在 图 像 编 辑 窗口 中 创建 文字 形状 选区 。 如 图 7-20 所 示 为 选区 文字 效果 。 
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7-20 选区 文字 效果 
下 面 详细 介绍 运用 横 排 文字 蒙 版 工具 在 移动 UI 图 像 中 输入 选区 文字 的 操作 方法 。 


如 5 当 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 7-21 所 示 。 
pe 台 2 汝 02| 选择 工具 箱 中 的 横 排 文字 蒙 版 工具 鲁 ©“， 如 图 7-22 所 示 。 


欢迎 光临 珊瑚 会 员 商 城 |T 直 排 文字 工具 
加 入 会 员 ， 立 享 特权 量 村 Ar 立 巷 上 师 下 目 了 
社 群 伴 学 习 ， 名 师 来 指导 了 | 
口 购买 课程 享受 6-8 折 
推广 课程 赚 取 20%-40% 


3 推荐 会 员 加 入 奖励 50 元 


马上 加 入 ， 领 取 特 权 吧 


日 [图 > p G7 国 Se o 


图 7-21 打开 素材 图 像 图 7-22 ”选择 横 排 文字 蒙 版 工具 


如 03| 执行 上 述 操作 后 ， 将 鼠标 指针 移 至 图 像 编 辑 窗口 中 的 合适 位 置 ， 在 图 像 中 单 击 
鼠标 左 键 ， 确 认 文本 输入 后 ， 此 时 ， 图 像 背 景 呈 淡 红 色 显 示 ， 如 图 7-23 所 示 。 
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可 04| 在 “字符 ”面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “48 点 ”， 
如 图 7-24 所 示 。 5 
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图 7-23 ”背景 呈 淡 红色 显示 图 7-24 设置 字符 属性 


05| 输入 “立即 加 入 ”， 此 时 输入 的 文字 呈 实 体 显 示 ， 如 图 7-25 所 示 。 
一 站 按 Ctrl+Enter 组 合 键 确认 ， 即 可 创建 文字 选区 ， 如 图 7-26 所 示 。 


欢迎 光临 珊瑚 会 员 商城 
人 ee 
储 群 人 名 嘱 末 指导 
. 课程 6-8 折 
9? 推广 课程 赚 取 2096-405% 
推荐 会 员 加 入 奖励 50:; 
马上 加 入 ， 领 取 特 权 吧 
(\K 


图 7-25 输入 文字 图 7-26 创建 文字 选区 


下 07 新建“ 图 层 1” 图 层 ， 设 置 前 景色 为 梭 色 (RGB 的 参数 值 分 别 为 250、129、 
100)， 如 图 7-27 所 示 。 


p 女 3 当 08| 按 Alt+Delete 组 合 键 ， 为 选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 
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果 如 图 7-28 所 示 。 


欢迎 光临 珊瑚 会 员 商城 
加 入 会 员 ， 立 享 特权 
社 群 伴 学 习 ， 名 师 来 指导 


购买 课程 享受 6-8 折 
?) 推广 课程 赚 取 2096-409%% 
名 推荐 会 员 加 入 奖励 50 元 


图 7-27 设置 前 景 图 7-28 ”最终 效果 


7.2 完 导 效果 : 设置 移动 U| 中 的 文子 效果 


在 移动 UI 设计 中 ， 设 置 与 编辑 文字 是 指 对 已 经 创建 的 文字 进行 进一步 完善 的 操作 ， 如 
设置 文字 属性 、 设 置 段 落 属性 、 选 择 文字 、 移 动 文字 、 更 改 文字 排列 方向 、 切 换 点 文字 和 上 段 
沙文 本 、 拼 写 检查 文字 以 及 查找 和 替换 文字 等 ， 可 以 根据 实际 情况 对 文字 对 象 进行 相应 操作 ， 
以 完善 文字 效果 。 


7.2.1 文字 属性 的 设置 o| 
在 设计 移动 UI 图 像 时 ， 设 置 文字 的 属性 主要 是 在 “字符 ”面板 中 进行 ， 在 “字符 ” 面 


板 中 可 以 设置 字体 、 字 体 大 小 、 字 符 间 中 以 及 文字 倾斜 等 属性 。 
下 面 详细 介绍 设置 移动 UI 文 字 属 性 的 操作 方法 。 


到 河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 7-29 所 示 。 
2 丈 河 02| 在 “图 层 ” 面 板 中 ， 选 择 需 要 编辑 的 文字 图 层 ， 如 图 7-30 所 示 。 
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《和 区 A 


- 则 去 亿 | 下 让 年 6 


图 层 
© TQ 
| 正常 ?| 不 透明 度 : |100% | - 


锁定 : 图 sf 中 和 ”填充 : |100%|- 


eT 


开始 测试 


图 7/-29 打开 素材 图 像 图 7-30 ”选择 文字 图 层 


03| 选择 “窗口 ”|“ 字 符 ” 命 令 ， 展 开 “ 字 符 ” 面 板 ， 设 置 字符 间距 为 200， 如 图 
171-31 所 示 。 
过; 洒 04| 执行 上 述 操作 后 即 可 更 改 文字 属性 ， 按 Enter 键 确 认 ， 效 果 如 图 7-32 所 示 。 


- 则 忌 仆 下 让 年 6 


和 CC gaa ls ID 


图 7-31 弹出 “字符 ”面板 图 7-32 最 终 效果 


开始 测试 


“字符 ”属性 面板 中 各 选项 的 主要 含义 如 下 。 
大 上 字体 系列 : 在 该 选项 列表 框 中 可 以 选择 字体 。 

辕 字 体 大 小 : 在 该 选项 列表 框 中 可 以 选择 字体 的 大 小 。 

图 行 距 : 行距 是 指 文本 中 各 行文 字 之 间 的 垂直 间距 ， 同 一 段落 的 行 与 行 之 间 可 以 设置 不 
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同 的 行距 。 

四 字 距 微调 : 用 来 调整 两 个 字符 之 间 的 距离 。 

国字 距 调整 : 选择 部 分 字符 时 ， 可 以 调整 所 选 字符 的 间距 。 没 有 选择 字符 时 ， 则 全 面 调 
整 字 距 。 

国 垂直 缩放 /水 平 缩放 : 水 平 缩放 用 于 调整 字符 的 宽度 ， 垂直 缩放 用 于 调整 字符 的 高 度 。 
这 两 个 百分比 相同 时 ， 可 以 进行 等 比 缩放 ， 不 相同 时 ， 则 可 以 进行 不 等 比 缩放 。 

加 基线 偏 移 ， 用 来 控制 文字 与 基线 的 距离 ， 可 以 升 高 或 降低 所 选 文字 。 

国 颜 色 : 单 击 颜色 块 ， 可 以 在 弹出 的 “ 拾 色 器 ”对 话 框 中 设置 文字 的 颜色 。 

加 IT 状 按钮 : 弹出 用 来 创建 仿 粗 体 、 斜 体 等 文字 样式 。 

四 语言 可 以 对 所 选 字符 进行 有 关连 字符 和 拼写 规则 的 语言 设置 ，Photoshop 使 用 语言 
词典 检查 连 字符 连接 。 


7.2.2 段落 属性 的 设置 | 


在 设计 移动 UI 图 像 时 ， 段 落 属性 主要 是 在 “段落 ”面板 中 进行 设置 。 使 用 “段落 ”面板 ， 
可 以 改变 或 重新 定义 文字 的 排列 方式 、 段 落 缩 进 及 段落 间距 等 。 
下 面 详细 介绍 设置 移动 UI 图 像 中 文本 段落 属性 的 操作 方法 。 


型 河 01| 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 如 图 7-33 所 示 。 
pe 于 当 02| 选择 “窗口 ”|“ 段 落 ” 命 令 ， 展 开 “ 段 落 ” 面 板 ， 如 图 7-34 所 示 。 


24 小 时 
全 天 候 服 务 


图 7-34 展开 “段落 ”面板 
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“段落 ”面板 中 各 选项 的 主要 含义 如 下 。 

四 站 对 齐 方式 : 包括 左 对 齐 文 本 、 居 中 对 齐 文本 、 右 对 齐 文 本 、 最 后 一 行 左 对 齐 、 最 后 一 
行 居 中 对 齐 、 最 后 一 行 右 对齐 和 全 部 对 齐 。 
辐 堪 缩 进 : 设置 段落 的 左 缩 进 。 

攻 站 首 行 缩 进 : 缩 进 段落 中 的 首 行文 字 。 对 于 横 排 文字 ， 首 行 缩 进 与 左 缩 进 有 关 ， 对 于 直 
排 文字 ， 首 行 缩 进 与 顶端 缩 进 有 关 。 要 创建 首 行 悬挂 缩 进 ， 必 须 输入 一 个 负 值 。 

区 是 段 前 添加 空格 : 设置 段落 与 上 一 行 的 距离 ， 或 全 选 文字 的 每 一 段 的 距离 。 

妇 右 缩 进 : 设置 段落 的 右 缩 进 。 

区 有 段 后 添加 空格 : 可 以 调整 选 定 段落 的 间距 。 

在 “段落 ”面板 中 ， 单 击 “居中 对 齐 文本 ”按钮 ， 如 图 7-35 所 示 。 

执行 操作 后 ， 文 本 的 段落 属性 效果 如 图 7-36 所 示 。 


24 小 时 
全 天 候 服务 


约会 神 
便捷 你 的 生活 
图 7-35 单 击 “ 居 中 对 齐 文本 ”按钮 图 7-36 ”最 终 效果 
7.2.3 选择 和 移动 UI 图 像 文字 | 


在 设计 移动 UI 图 像 时 ， 选 择 文字 是 文字 编辑 过 程 中 的 第 一 步 ， 适 当地 将 文字 移 至 图 像 
中 的 合适 位 置 ， 可 以 使 图 像 整体 更 美观 。 

在 Photoshop CC 中 ， 可 以 根据 需要 ， 选 择 工具 箱 中 的 移动 工具 ， 将 鼠标 移 至 输入 完成 的 
文字 上 ， 单 击 鼠 标 左 键 并 拖 虹 鼠标 指针 ， 移 动 文字 至 图 像 中 的 合适 位 置 。 如 图 7-37 所 示 为 移 
动 文字 前 后 的 对 比 效果 。 


141A 一 


有 


Photoshop™ 一 二 


p> 
和 移动 UI 设计 从 入 门 到 精通 ( 第 2 版 ) 
alwlElhlrlvlullolP alwjEjlajrlyJul Jo 
A[sjo[ejsJjhjJJd Als[olr[elr[y [kl 
zjxjclvJeJNjJw zjxjcjvJelNjw 
= Om 
图 7-37 移动 文字 前 后 的 对 比 效果 
7.2.4 ”设置 文字 的 方向 互 换 | 


在 设计 移动 UI 图 像 时 ， 虽 然 使 用 横 排 文字 工具 只 能 创建 水 平 排列 的 文字 ， 使 用 直 排 文 
字 工 具 只 能 创建 垂直 排列 的 文字 ， 但 在 需要 的 情况 下 ， 可 以 相互 转换 这 两 种 文字 的 显示 方向 。 


在 Photoshop CC 中 ， 单 击 文字 工具 属性 栏 上 的 “更 改 文本 方向 ”按钮 二 ,将 输入 完成 的 文字 
在 水 平 与 垂直 方向 间 互 换 。 


图 7-38 所 示 为 互 换 水 平和 垂直 文字 前 后 的 对 比 效果 。 


图 7-38 互 换 水 平和 垂直 文字 前 后 的 对 比 效 果 


除了 使 用 以 上 方法 可 以 将 直 排 文字 与 模 排 文字 之 间 相 互 转换 外 ， 还 可 以 选择 “图 
层 | 文字 | 水 平 命令， 或 选择 “图 层 | 文字 | 垂直 命令。 


LIN142 


“和 和 


画龙点睛 ， 医 
et 移动 UI 文字 编排 设计 区 


7.2.5 ” 段 沙 文本 与 点 文本 的 切换 JU 
在 设计 移动 UI 图 像 时 ， 点 文本 和 段落 文本 可 以 相互 转换 ， 转 换 时 选择 “类 型 |“ 转换 
为 段落 文本 ”命令 ， 或 选择 “类 型 ”|“ 转 换 为 点 文本 ”命令 即 可 。 
下 面 详细 介绍 切换 点 文本 和 段落 文本 的 操作 方法 。 


运河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 7-39 所 示 。 
现 河 02| 在 “图 层 ” 面 板 中 ， 选 择 相应 的 文字 图 层 ， 如 图 7-40 所 示 。 


图 7-39 打开 素材 图 像 7-40 选择 文字 图 层 


点 文本 的 文字 行 是 独立 的 ， 即 文字 的 长 度 随 文本 的 增加 而 变 长 却 不 会 自动 换行 ， 如 
果 在 输入 点 文字 时 需要 换行 则 必须 按 Enter 键 ; 输入 段落 文本 时 ， 文字 基于 定 界 框 的 尺寸 
将 自动 换行 ， 用 户 可 以 输入 多 个 段落 文本 ， 也 可 以 进行 段落 文本 调整 ， 定 界 框 的 大 小 可 
以 任意 调整 ， 以 便 重 新 排列 文字 。 


本 本 03| 选择 “类 型 ”|“ 转 换 为 段落 文本 ”命令 ， 如 图 7-41 所 示 。 
过 河 04| 执行 上 述 操作 后 ， 即 可 将 点 文本 转换 为 段落 文本 。 选 择 工具 箱 中 的 横 排 文字 工 
具 ， 在 文本 处 单 击 鼠标 左 键 ， 即 可 查看 段落 文本 状态 ， 如 图 7-42 所 示 。 
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| ¥ NU | 过 


更 新 所 有 文字 图 层 (U) 
芋 换 所 有 缺 欠 字 体 (F) 


粘贴 Lorem Ipsum(P) 


载 入 默认 文字 样式 
存储 默认 文字 样式 


图 7-41 选择 “转换 为 段落 文本 ”命令 图 7-42 将 点 文本 转换 为 段落 文本 


2 天河 05| 按 CtrltEnter 组 合 键 确 认 , 选择 “类 型 | “转换 为 点 文本 ”命令 , 如 图 7-43 所 示 。 


济 当 06| 执行 上 述 操作 后 ， 即 可 将 段落 文本 转换 为 点 文本 ， 选 取 工 具 箱 中 的 横 排 文字 工 
具 ， 在 文字 处 单 击 鼠标 左 键 ， 即 可 查看 点 文本 状态 ， 如 图 7-44 所 示 。 


选择 (9 ”小 筑 中 ”视图 (V) 窗口 (W) ”帮助 ( 


更 新 所 有 文字 图 层 (U) 
苦 换 所 有 缺 欠 字体 (H) 


粘贴 Lorem Ipsum(P) 


载 入 默认 文字 样式 
存储 默认 文字 样式 
图 7-43 ”选择 “转换 为 点 文本 ”命令 图 7-44 ”将 段落 文本 转换 为 点 文本 
7.2.6 文字 的 拼写 检查 JW 


在 设计 移动 UI 图 像 时 ， 可 以 通过 “拼写 检查 ”命令 检查 输入 的 拼音 文字 ， 系 统 将 对 词 


画龙点睛 .局 
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典 中 没有 的 词 进 行 询问 ， 如 果 被 询问 的 词 拼 写 是 正确 的 ， 可 以 将 该 词 添 加 到 拼写 检查 词典 中 ， 
如 果 询 问 的 词 的 拼写 是 错误 的 ， 可 以 将 其 改正 。 

当 移 动 UI 图 像 中 出 现 错误 的 英文 单词 时 , 可 以 选择 “编辑 ”|“ 拼 写 检查 ”命令 , 弹出 “ 拼 
写 检查 ”对 话 框 ,系统 会 自动 查找 不 在 词典 中 的 单词 , 在 “更 改 为 ”文本 框 中 输入 正确 的 单词 ， 
如 图 7-45 所 示 。 


v 区 过 


The Little Qrince 03 


|「 加 检查 所 有 图 层 


图 7-45 在 “更 改 为 ”文本 框 中 输入 类 文 单词 


单 击 “ 更 改 ”按钮 ， 弹 出 信息 提示 框 ， 如 图 7-46 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 拼写 
错误 的 英文 单词 更 改正 确 ， 效 果 如 图 7-47 所 示 。 


The Little Prince 03 


吧 ” 小 王子 | The Little Prince 


悦 人 前 


图 7-46 信息 提示 框 图 7-47 更 正 错误 的 美文 单词 
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“拼写 检查 ”对 话 框 中 各 选项 的 主要 含义 如 下 。 

国 四 包 略 : 单 击 此 按钮 ， 继 续 进 行 拼写 检查 而 不 更 改 文字 。 

加 更 改 : 单 击 此 按钮 可 以 改正 一 个 拼写 错误 ， 但 应 确保 “更 改 为 ”文本 框 中 的 词语 拼写 
正确 。 

图 更改 全 部 :要 更 改 文档 中 重复 的 拼写 错误 ， 可 以 单 击 此 按钮 。 

四 "I 添加: 单 击 此 按钮 ， 可 以 将 无 法 识别 的 词 存储 在 拼写 检查 词典 中 。 

轿 检 查 所 有 图 层 : 选中 该 复 选 框 ， 可 以 对 整体 图 像 中 的 不 同 图 层 的 拼写 进行 检查 。 


7.2.7 ”文字 的 得 找 与 蔡 换 | 


在 移动 UI 图 像 中 输入 大 量 的 文字 后 ， 如 果 出 现 相同 错误 的 文字 很 多 ， 可 以 使 用 “查找 
和 替换 文本 ”功能 对 文字 进行 批量 更 改 ， 来 提高 工作 效率 。 
下 面 详细 介绍 查找 与 替换 文字 的 操作 方法 。 


于 沼 01| 选择 “文件 ”| “打开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 7-48 所 示 。 
2 天河 02| 选择 所 有 的 文字 图 层 , 选择 “编辑 ”| “查找 和 替换 文本 ”命令 ， 如 图 7-49 所 示 。 


拷贝 (C) Ctrl+C 
合并 拷贝 (人 ) Shift+Ctrl+C 


内 容 识别 比例 Alt+Shift+Citrl+C 
扰 控 赤 形 


自 击 变 洗 (日 Ctrl+T 
» 


自动 混合 图 层 .… 
定义 画笔 预 设 (B).… 
定义 图 窜 .- 


定义 自 定 形状 … 
清理 (R) 
Adobe PDF 预 设 ... 


远程 连接 .… 
闫 色 设 置 (G)..， Shift+Ctrl+K 


图 7-48 打开 素材 图 像 图 7-49 ”选择 “查找 和 替换 文本 ”命令 


pg 如 5 当 03| 弹出 “查找 和 替换 文本 ”对 话 框 ， 设 置 “查找 内 容 ” 为 “ 摄 颗 ”、“ 更 改 为 ” 
为 “摄影 ”， 如 图 7-50 所 示 。 
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04| 单 击 “ 查 找 下 一 个 ”按钮 ， 即 可 查找 到 相应 文本 ， 如 图 7-51 所 示 。 
“查找 和 替换 文本 ”对 话 框 中 各 选项 的 主要 含义 如 下 。 

攻 国 查找 内 容 : 在 该 文本 框 中 输入 需要 查找 的 文本 内 容 。 

加 更 改 为 : 在 该 文本 框 中 输入 需要 更 改 的 文本 内 容 。 

国 区 分 大 小 写 :; 对 于 英文 字体 ， 查 找 时 严格 区 分 大 小 写 。 

区 全 字 匹 配 : 对 于 英文 字体 ， 查 找 的 内 容 必须 与 分 隔 符 之 间 的 部 分 完全 一 致 。 
国 向 前 : 选中 该 复 选 框 时 ， 只 查找 光标 所 在 点 前 面 的 文字 。 


报 颗 构图 
摄 颍 后 期 
摄 颖 构图 + 后 期 
图 7-50 ”设置 各 选项 图 7-51 查找 到 相应 文本 


p 建 当 05| 单 击 “ 更 改 全 部 ”按钮 ， 弹 出 信息 提示 框 ， 如 图 7-52 所 示 。 
pg 妇 潮 06| 单 击 “ 确 定 ” 按 钮 ， 即 可 完成 文字 的 替换 ， 效 果 如 图 7-53 所 示 。 


摄影 构图 
摄影 后 期 
摄影 构图 + 后 期 
0 没有 找到 更 多 匹配 项 ， 进 行 了 3 处 苦 换 。 
世相 
Ei 
图 7-52 弹出 信息 提示 框 图 7-53 ”最终 效果 
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在 移动 UI 的 设计 过 程 中 ， 由 于 拍摄 时 的 取景 问题 ， 往 往 会 使 拍摄 出 来 的 
照片 内 容 过 于 复杂 。 ER ed plats 
主要 部 分 单独 使 用 。 本 章 介 绍 如 何 使 用 Photoshop 中 的 工具 和 命令 进行 抠 图 与 
合成 。 


本 章 重 点 导航 


@ “反问 ”命令 

@ “扩大 选取 ”命令 
@ 快速 选择 工具 

@ 和 拢 形 选 框 工 具 

〇 套 索 工具 

〇 磁性 套 索 工具 
© 


@ “色彩 泥 围 ” 
@ “选取 相似 ” 
〇 魔 棒 工 具 

@ 椭圆 选 框 工具 
〇 多 边 形 套 索 工具 
@ 魔术 橡皮 擦 工具 
@ 自由 钢笔 工具 


< 甜 栖 白 条 


党 点 击 开始 
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8.1 抠 图 命令 : 漳 握 移动 UI 图像 命令 抠 图 技法 


本 节 主 要 介绍 通过 运用 “ 反 同 ”“ 色 彩 范 围 ”“ 扩 大 选取 ”“ 选 取 相 似 ” 及 “调整 边 绿 - 
命令 对 移动 UI 图 像 进 行 抠 图 操作 的 方法 。 
8.1.1 “ 反 向 ”命令 DO 

在 选取 图 像 时 ， 不 但 要 根据 不 同 的 图 像 类 型 选择 不 同 的 选取 工具 ， 还 要 根据 不 同 的 图 像 
类 型 选择 不 同 的 选取 方式 。 在 移动 UI 的 设计 过 程 中 ,“ 反 向 ”命令 是 比较 第 用 的 选取 方式 之 一 ， 
也 是 抠 图 合成 处 理 中 第 用 的 操作 。 

下 面 介 绍 使 用 “ 反 向 ”命令 抠 图 的 具体 操作 方法 。 


运河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 8-1 所 示 。 
台中 02| 在 “背景 ”图 层 上 双击 鼠标 左 键 ， 将 “背景 ”图 层 转换 为 普通 图 层 ， 选 取 工 具 
箱 中 的 磁性 套 索 工具 ， 在 图 像 编辑 窗口 中 创建 一 个 选区 ， 如 图 8-2 所 示 。 


《 甜 橙 白 条 < 甜 橙 白条 


@ 百 万 商户 随机 立 减 后 办 ~ 一 
元 


人 百 万 商 记 风机 立 碱 和 和 


: 9.95 


全 5 的 他 用 卡 还 积分 ' 505 


白条 随意 借 开通 得 20 ; 
© farmso00i100 :1205 


图 8-1 打开 素材 图 像 图 8-2 选中 白色 区 域 


用 户 可 以 选择 “选择 ”|“ 反 向 ”命令 反选 选区 ， 也 可 以 按 Ctrl+Shift+I 组 合 键 ， 将 选 
区 反选 。 


站 150 
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一 一 


姑 8 六 


界面 合成 : 
4 移动 UI 图 像 抠 取 与 合成 


更 河 03| 选择 “选择 ”|“ 反 向 ”命令 ， 反 选 选区 ， 如 图 8-3 所 示 。 
证 浏 04| 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 即 可 抠 取 图 像 ， 如 图 8-4 所 示 。 


,一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


[< 天 本 和 条 


++*+IHBAHINS md ?+ {HAHIIS 1 


= NE NM 


:一 和 一 和 4) 


4 
4 
| 
| 
| 
: | : 绞 水 电 二- 一 
: | i 
» | 日 
反选 全 百 万 商户 用 机 立 减肥 ! 
二 | 1 


Os 65 折 购 信 用 卡 还 教 兰 | 505 


© 百 万 商户 随机 立 减 /下 isEes 


| 9.9a 


白条 箭 意 借 开通 得 
© iasooitlo 120x 


白条 戎 意 借 开通 | 本 
© 偿 款 满 5000 送 10 120x 


图 8-3 反选 选区 图 8-4 抠 取 图 像 
8.1.2 “色彩 范围 ” 命 OY 
使 用 “色彩 范围 ”命令 快速 创建 选区 ， 其 原理 是 以 颜色 作为 依据 ， 类 似 于 魔 棒 工 具 ， 但 


是 它 比 魔 棒 工具 更 加 强大 。 
下 面 介绍 运用 “色彩 范围 ”命令 抠 图 的 具体 操作 方法 。 


二 01 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 8-5 所 示 。 
p02 选择 “选择 ” “色彩 范围 ” 命令 ， 弹 出 “色彩 范围 ” 对 话 框 ， 将 鼠标 指针 移 
至 图 像 编辑 窗口 中 的 白色 区 域 ， 并 且 单 击 鼠 标 左 键 ， 如 图 8-6 所 示 。 


最 高 100 元 红包 


你 的 专属 福利 


击 选择 区 围 [E) 。 站 〇 图像 (M) 
选区 视点 (TT); 无 


图 8-5 ”打开 素材 图 像 图 8-6 单 击 白 色 区 域 


LY Pg 


EB3§“nmn 


Photoshop™ = = ER 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


应 用 “色彩 范围 ”命令 指定 颜色 范围 时 ， 可 以 调整 所 需 按 区 域 的 预览 方式 。 通 过 “ 选 
区 预览 ”选项 可 以 设置 预览 方式 , 包括 “灰色 “黑色 杂 边 “白色 杂 边 和 快速 蒙 版 4 


对 03| 单 击 “ 确 定 ” 按 钮 ， 即 可 在 图 像 中 选择 相应 区 域 ， 用 和 矩形 选 框 工具 增加 相应 图 
像 选 区 ， 如 图 8-7 所 示 。 

对 04 按 Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 如 图 
8-8 所 示 。 


领 最 高 100 元 红包 


你 的 专属 福利 


领 最 高 100 元 红包 


你 的 专属 福利 


图 8-7 创建 选区 图 8-8 复制 新 图 层 并 隐藏 “背景 ”图 层 


“色彩 范围 ”命令 是 一 种 利用 图 像 中 的 颜色 变化 关系 来 创建 选区 的 命令 ， 此 命令 根 
据 选取 色彩 的 相似 程度 ， 在 图 像 编 辑 窗口 中 提取 相似 的 色彩 区 域 而 生成 选区 。 在 编辑 图 
像 的 过 程 中 , 若 像素 图 像 的 元 素 过 多 或 者 需要 对 整 幅 图 像 进行 调整 , 则 可 以 使 用 选择 ”| 
“全 部 ”命令 对 图 像 进 行 调整 。 


8.1.3 “扩大 选取 ”命令 JU 


在 Photoshop CC 中 , 选择 “扩大 选取 ”命令 时 , Photoshop 会 基于 魔 棒 工 具 属性 栏 中 的 “ 容 
差 ” 值 来 决定 选区 的 扩展 范围 。 首 先 确 定 小 块 的 选区 ， 然 后 再 执行 此 命令 来 选取 相 邻 的 像素 。 
Photoshop CC 会 查找 并 选择 与 当前 选区 中 的 像素 颜色 相近 的 像素 ， 从 而 扩大 选区 ， 但 该 命令 
只 扩大 到 与 原 选 区 相连 接 的 区 域 。 

选取 工具 箱 中 的 魔 棒 工 具 国 , 在 移动 UI 图 像 中 单 击 鼠 标 左 键 , 创建 一 个 选区 ,如 图 8-9 所 示 。 


二 7 
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专家 捐 点 


图 8-9 创建 选区 


连续 多 次 选择 “选择 ”|“ 扩 大 选取 ”命令 ， 即 可 扩大 选区 ， 如 图 8-10 所 示 。 按 Ctrl+J 组 
合 键 复制 一 个 新 图 层 , 并 隐 减 “背景 ”图 层 , 即 可 将 选取 的 图 像 抠 取出 来 , 效果 如 图 8-11 所 示 。 


图 8-10 扩大 选区 图 8-11 复制 新 图 层 并 隐藏 “背景 ”图 层 
8.1.4 “选取 相似 ”命令 电 


在 移动 UI 设计 过 程 中 ， 使 用 “选取 相似 ”命令 ， 可 以 根据 现 有 的 选区 及 包含 的 容 差 值 ， 
自动 将 图 像 中 颜色 相似 的 所 有 区 域 选 中 ， 使 选区 在 整个 图 像 中 进行 不 连续 的 扩展 。 


pg SS 


有 
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选择 工具 箱 中 的 魔 棒 工 具 国 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 20， 在 图 像 中 单 击 鼠标 左 
键 ， 创 建 选区 ， 如 图 8-12 所 示 。 


图 8-12 创建 选区 


连续 多 次 选择 “选择 ” |“ 选取 相似 ”命令 ， 选 取 颜 色相 似 的 区 域 ， 如 图 8-13 所 示 。 按 
Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 如 图 8-14 所 示 。 


红包 活动 还 淫 开 绑 


图 8-13 ”选取 颜色 相似 区 域 图 8-14 复制 新 图 层 并 隐藏 “背景 ”图 层 


专家 指点 ) 


按 AlttS+R 组 合 键 ， 也 可 以 创建 相似 选区 。 
“选取 相似 ”命令 是 将 图 像 中 所 有 与 选区 内 像素 颜色 相近 的 像素 都 扩充 到 选区 中 ， 
不 适合 用 于 复杂 像素 图 像 。 


WE 
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8.2 ”工具 抠 图 : 革 握 移动 U| 工具 抠 图 技法 


在 移动 UI 的 设计 过 程 中 ， 对 图 像 进 行 抠 图 合成 处 理 时 ， 经 常 需要 借助 选区 来 确定 操作 
对 象 的 区 域 ， 选 区 的 功能 在 于 准确 地 限制 抠 取 图 像 的 范围 ， 从 而 得 到 精确 的 效果 ， 因 此 选区 
工具 尤为 重要 。 


8.2.1 快速 选择 工具 JU 


在 移动 UI 的 设计 过 程 中 ， 运 用 快速 选择 工具 可 以 通过 调整 画笔 的 笔触 、 硬 度 和 间距 等 
参数 再 快速 单 击 或 拖 动 创建 选区 ， 然 后 进行 抠 图 合成 处 理 。 拖 动 时 ， 选 区 会 咎 外 扩展 并 上 自动 


查找 和 跟随 图 像 中 定义 的 边 绿 。 
用 快速 选择 工具 国 | 创 建 选区 通常 用 于 在 一 定 容 差 范围 内 的 颜色 选取 ， 在 进行 选取 时 ， 需 
要 设置 相应 的 画笔 大 小 。 


下 面 介绍 运用 快速 选择 工具 抠 图 的 具体 操作 方法 。 


p 细 5 浊 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 8-15 所 示 。 
2 到 5 河 02| 选择 工具 箱 中 的 快速 选择 工具 恩 , 在 工具 属性 栏 中 设置 画笔 “大 小 ”为 10 像 素 ， 
在 相应 图 像 上 拖 提 女 标 指针 ， 如 图 8-16 所 示 。 


夷 果 200gx3 绕 


奶 香 浓 部 ， 吃 了 还 起 乃 ! 


首页 购物 车 我 的 


8-15 ”打开 素材 图 像 8-16 ” 拖 动 鼠标 指针 


快速 选择 工具 默认 选择 光标 周围 与 光标 范围 内 的 颜色 类 似 且 连续 的 图 像 区 域 , 因此 ， 
光标 的 大 小 决定 着 选取 的 范围 。 
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本 可 03| 继续 在 图 像 中 拖 虹 鼠标 指针 ， 直 至 选择 需要 的 图 像 范 围 ， 如 图 8-17 所 示 。 
于 当 04| 按 Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 效果 
如 图 8-18 所 示 。 


夏威夷 果 200gx3 袋 


人 奶 香 浓 都 ， 吃 了 还 想 吃 ! 


会 = 久 
首页 购物 车 我 的 
8-17 ”继续 拖 忠 鼠标 指针 图 8-18 复制 新 图 层 并 隐藏 “背景 ”图 层 


快速 选择 工具 是 根据 颜色 相似 性 来 选择 区 域 的 ， 可 以 将 画笔 大 小 内 的 相似 颜色 一 次 
性 选中 。 在 工具 箱 中 选择 快速 选择 工具 四 后 ， 其 工具 属性 栏 变化 如 图 8-19 所 示 。 


L 2 3 引 


| % 国 必 | 3 |V we | esha 
图 8-19 ”快速 选择 工具 的 工具 属性 栏 


快速 选择 工具 的 工具 属性 栏 中 各 选项 的 主要 含义 如 下 。 

攻 国 选区 运算 按钮 : 分 别 为 “新 选区 ”按钮 晶 8， 可 以 创建 一 个 新 的 选区 ，“ 添 加 到 选区 ” 
按钮 琅 ， 可 在 原 选区 的 基础 上 添加 新 的 选区 ，“ 从 选区 减 去 ”按钮 苞 和 ， 可 在 原 选 区 的 基础 
上 减 去 当前 绘制 的 选区 。 

加 “画笔 拾取 器 ”: 单 击 按钮 ， 可 以 设置 画笔 笔尖 的 大 小 、 硬 度 和 间距 。 

EE 国 对 所 有 图 层 取样 : 可 基于 所 有 图 层 创建 选区 。 

区 国 自 动 增强 : 可 以 减少 选区 边界 的 粗糙 度 和 块 效 应 。 

下 面 介绍 运用 快速 选择 工具 创建 选区 的 操作 方法 。 

在 拖 动 过 程 中 ， 如 果 有 少 选 或 多 选 的 现象 ， 可 以 单 击 工具 属性 栏 中 的 “添加 到 选区 ” 按 
钮 加 或 “从 选区 减 去 ”按钮 万， 在 相应 区 域 适当 拖 动 ， 以 进行 适当 调整 。 

在 快速 选择 工具 属性 栏 中 有 一 个 “对 所 有 图 层 取 样 ” 选 项 ， 在 选中 “对 所 有 图 层 取 样 ” 
复 选 框 后 ， 拖 动人 鼠标 进行 快速 选择 时 ， 不 仅 对 “图 层 1” 图 层 中 的 图 像 进行 了 取样 ,而 且 “ 背 


Ny 9] 


“和 和 


姓 8 潭 


界面 合成 : 
ESAT 移动 UI 图 像 抠 取 与 合成 


景 ” 图 层 中 的 图 像 也 被 选中 。 如 果 取 消 选 中 “对 所 有 图 层 取样 ” 复 选 框 ， 在 进行 对 “图 层 1” 
图 层 进行 取样 时 ， 将 不 能 同时 选中 “背景 ”图 层 中 的 图 像 。 


8.2.2 ” 魔 棒 工具 | 


在 移动 UI 的 设计 过 程 中 ,使 用 魔 棒 工具 可 以 在 图 像 中 颜色 相近 或 相同 的 区 域 创 建 选区 。 
在 颜色 相近 的 图 像 上 单 击 鼠 标 左 键 ， 即 可 选取 图 像 中 的 相近 颜色 范围 。 在 工具 箱 中 选择 魔 棒 
工具 后 ， 其 工具 属性 栏 如 图 8-20 所 示 。 


图 8-20 ” 魔 棒 工具 属性 栏 


魔 棒 工具 的 工具 属性 栏 中 各 选项 的 主要 含义 如 下 。 
四 窑 差 : 用 来 控制 创建 选区 范围 的 大 小 ， 数 值 越 小 ， 所 要 求 的 颜色 越 相近 ， 数 值 越 大 ， 


则 颜色 相差 越 大 。 
加 消除 锯齿: 用 来 模糊 羽化 边缘 的 像素 ， 使 其 与 背景 像素 产生 颜色 的 过 渡 ， 从 而 消除 边 
绿 明显 的 锯齿 。 


医 下 连续 : 在 使 用 魔 棒 工具 选择 图 像 时 ， 在 工具 属性 栏 中 勾 选 “连续 ” 复 选 框 ， 只 选取 与 
单 击 处 相 邻 的 、 容 差 范 围 内 的 颜色 区 域 ， 如 图 8-21 所 示 。 


图 8-21 取消 勾 选 ( 左 ) 与 勾 选 (在 ) “连续 ” 复 选 框 的 选区 效果 


攻 目 对 所 有 图 层 取样 : 用 于 有 多 个 图 层 的 文件 。 匀 选 该 复 选 框 后 ， 能 选取 图 像 文件 中 所 有 
图 层 中 相近 颜色 的 区 域 ， 取 消 勾 选 时 ， 只 选取 当前 图 层 中 相近 颜色 的 区 域 。 
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下 面 介 绍 运用 魔 棒 工 具 进 行 抠 图 的 操作 方法 。 


寺 当 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 8-22 所 示 。 
天 河 02| 选取 工具 箱 中 的 魔 棒 工 具 ， 在 工具 属性 栏 上 设置 “ 容 差 ”为 50， 将 鼠标 指针 
移 至 图 像 编辑 窗口 中 的 红色 区 域 上 ， 单 击 鼠标 左 键 ， 即 可 创建 选区 ， 如 图 8-23 所 示 。 


图 8-22 ”打开 素材 图 像 图 8-23 创建 选区 


在 工具 属性 栏 上 单 击 “ 添 加 到 选区 ”按钮 ， 再 将 鼠标 指针 移 至 红色 区 域 上 ， 单 
击 鼠 标 左 键 ， 加 选 选区 ， 如 图 8-24 所 示 。 

按 Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 效果 
如 图 8-25 所 示 。 


PS 文件 (F) 。 竹 每 (日 ”图 您 0 图 层 (U : 
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图 8-24 ”加 选 选区 图 8-25 抠 取 图 像 
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之 间 的 数值 ， 其 主要 用 于 确定 选择 范围 的 容 差 ， 默认 值 为 32。 设 置 的 数值 越 小 ， 选 择 的 
颜色 范围 越 相近 ， 范 围 也 就 越 小 ， 如 图 8-26 和 图 8-27 所 示 。 


闪现 
2 


了 


分 类 我 的 订单 我 的 


8-26 ” 容 差 为 60 的 选取 效果 图 8-27 ” 容 差 为 100 的 选取 效果 


8.2.3 ”和 窍 形 选 框 工具 | 


在 移动 UI 的 设计 过 程 中 ， 使 用 矩形 选 框 工具 可 以 建立 矩形 选区 或 正方 形 选区 ， 该 工具 
是 区 域 选择 工具 中 最 基本 、 最 第 用 的 工具 ,选择 矩形 选 框 工具 后 , 其 工具 属性 栏 如 图 8-28 所 示 。 


L 2 3 


EL CEI ll 
图 8-28 ”和 矩形 选 框 工具 属性 栏 


和 矩形 选 框 工具 的 工具 属性 栏 中 各 选项 的 含义 如 下 。 

医 国 羽 化 : 用 来 设置 选区 的 羽化 范围 ， 从 而 得 到 柔 化 效果 。 

加 样式 : 用 来 设置 选区 的 创建 方法 。 选 择 “ 正 常 ”选项 ， 可 以 自由 创建 任何 宽 高 比例 、 
长 宽大 小 的 矩形 选区 ， 选 择 “ 固 定 比例 ”选项 ， 可 在 “宽度 ”和 “高 度 ” 文 本 框 中 输入 数值 ， 
设置 选区 高 度 与 宽度 的 比例 ， 得 到 精确 的 固定 宽 高 比 的 矩形 选区 ， 选 择 “ 固 定 大 小 ”选项 ， 
可 在 “宽度 ”和 “高 度 ” 文 本 框 中 输入 数值 ， 确 定 新 选区 高 度 与 宽度 的 精确 数值 ， 创 建 大 小 
精确 的 选区 。 

基调 整 边 缘 : 单 击 该 按钮 , 可 以 打开 “调整 边缘 ”对 话 框 , 对 选区 进行 平滑 、 羽化 等 处 理 。 
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下 面 介 绍 运用 和 矩形 选 框 工具 抠 图 的 操作 方法 。 


一 河 01| 选择 “文件 ” |“ 打开” 命令， 打开 8.2.3(a)jpg、8.2.3(b)jpg 两 幅 素材 图 像 ， 如 
图 8-29 所 未。 


图 8-29 ”打开 素材 图 像 
确认 8.2.3(b).jpg 图 像 编 辑 窗口 为 当前 编辑 窗口 ， 选 取 工 具 箱 中 的 矩形 选 框 工 
具 国 ， 将 鼠标 指针 移 至 图 像 编辑 窗口 中 的 合适 位 置 ， 单 击 鼠 标 左 键 的 同时 进行 拖 忠 ， 创 建 一 
个 算 形 选区 ， 如 图 8-30 所 示 。 
选取 工具 箱 中 的 移动 工具 国 ， 将 鼠标 指针 移 至 图 像 中 的 矩形 选区 内 ， 按 住 鼠 
标 左 键 的 同时 拖 虹 选 区 内 图 像 至 8.2.3(a).jpg 图 像 编 辑 窗口 中 ， 如 图 8-31 所 示 。 


图 8-30 创建 矩形 选区 图 8-31 移动 矩形 选区 内 图 像 
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与 矩形 选 框 工 具有 关 的 技巧 如 下 。 

@ 按 M 键 ， 可 快速 选择 矩形 选 框 工 具 。 

@ 拖 动 筷 标 指针 的 同时 按 Shift 键 ， 可 创建 正方 形 选区 。 

@ 拖 动 筷 标 指针 的 同时 按 Alt 键 ， 可 创建 以 起 点 为 中 心 的 矩形 选区 。 

@ 拖 动 和 扎 标 指针 的 同时 按 AlttShift 组 合 键 ， 可 创建 以 起 点 为 中 心 的 正方 形 选区 。 


2 天河 04| 移动 图 像 至 合适 人 位置， 选择“ 编辑 ”|“ 变 换 ”|“ 缩 放 ” 命 令 , 调 出 变换 控制 框 ， 
如 图 8-32 所 示 。 
2 天河 05| 适当 调整 图 像 的 大 小 ， 按 Enter 键 选择 确认 操作 ， 效 果 如 图 8-33 所 示 。 


调整 图 像 


图 8-32 调 出 变换 控制 杠 图 8-33 ”最 终 效果 
8.2.4 椭圆 选 框 工具 JU 


在 移动 UI 的 设计 过 程 中 ， 使 用 椭圆 选 框 工 具 可 以 创建 椭圆 选区 或 正 圆 选区 。 选 择 燃 加 
选 框 工具 后 ， 其 属性 栏 的 变化 如 图 8-34 所 示 。 
i O -| 国名 吕 辣 | 3 ER] 口水 WE 上 | 格 t: [ER 于 | | 之 训 | 
图 8-34 ”椭圆 选 框 工具 的 工具 属性 栏 


选择 工具 箱 中 的 椭圆 选 框 工具 攻 ， 将 鼠标 指针 移 至 图 像 编辑 窗口 中 ， 单 击 鼠 标 左 键 的 同 
时 按 住 Shift 键 进行 拖 忠 ， 创 建 一 个 正 圆 形 选区 ， 如 图 8-35 所 示 。 
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与 椭圆 选 框 工 具有 关 的 技巧 如 下 。 

@ 按 ShifttM 组 合 键 ,可 快速 选择 椭圆 选 框 工具 ， 

@ 拖 动 筷 标 指针 的 同时 按 Shift 键 ， 可 创建 正 圆 选 区 。 

@ 拖 动 鼠标 指针 的 同时 按 Alt 键 ， 可 创建 以 起 点 为 中 心 的 椭圆 选区 。 

@ 拖 动 筷 标 指针 的 同时 按 Alt+Shift 组 合 键 ， 可 创建 以 起 点 为 中 心 的 正 圆 选区 。 


目标 收益 : 10000 目标 收益 : 10000 


创建 


已 完成 帐 期 数量 : 10 获 利 : 10000 已 完成 帐 期 数量 : 10 获 利 : 10000 

进行 中 帐 期 数量 : 2 目前 获 利 : 4000 进行 中 帐 期 数量 : 2 目前 获 利 : 4000 

帐 期 总 回馈 : 100000.00 帐 期 总 回馈 : 100000.00 

订单 额 时 间 帐 期 时 长 ”累计 ”状态 订单 额 时 间 帐 期 时 长 ”累计 ”状态 
2015/6/16 完 2015/6/16 完 

2980.00 4015/®/ 30 ”4.55 完成 298000 2015/6/ 30 ”4.55 完成 
2015/6/16 一 2015/6/16 一 

2089.00 全 人/ 30 ”4.55 ”完成 2089.00 201°/6/ 30 ”4.55 完成 


图 8-35 创建 一 个 椭圆 选区 
按 Ctrl+J 组 合 键 复制 选区 内 的 图 像 ， 建 立 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 
取出 来 效果 如 图 8-36 所 示 。 


© x. 回 ©. 外 国会 .: 
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图 8-36 ” 抠 图 效果 
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8.2.5 ” 套 索 工具 JW 


在 移动 UI 的 设计 过 程 中 ， 使 用 套 索 工具 可 以 在 图 像 编 辑 窗口 中 创建 任意 形状 的 选区 。 
套 索 工具 一 般 用 于 创建 不 太 精 确 的 选区 ， 并 进行 抠 图 处 理 。 
选择 工具 箱 中 的 套 索 工 具 ， 在 图 像 编辑 窗口 中 的 合适 位 置 创建 选区 ， 如 图 8-37 所 示 。 


离开 电子 设备 ， 抱 抱 宠 物 吧 ! 离开 电子 设备 ， 抱 抱 宠 物 吧 ! 


党 点 击 开始 党 点 击 开始 


图 8-37 创建 选区 


按 Ctrl+J 组 合 键 ， 复 制 选区 内 的 图 像 ， 建 立 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 
抠 取 出 来 效果 如 图 8-38 所 示 。 


c fr, 回 .向 加 便 


图 8-38 抠 图 效果 
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套 索 工具 主要 用 来 选取 对 精度 要 求 不 高 的 区 域 ， 该 工具 的 最 大 优势 是 绘制 选区 的 效 
率 很 高 。 


8.2.6 ”多 边 形 套 论 工 具 | 


在 移动 UI 的 设计 过 程 中 ， 使 用 多 边 形 套 索 工 具 可 以 在 图 像 编辑 窗口 中 绘制 不 规则 的 选 
区 以 进行 抠 图 处 理 。 多 边 形 套 索 工具 创建 的 选区 可 以 非常 精确 。 
下 面 介 绍 运用 多 边 形 套 索 工具 抠 图 的 操作 方法 。 


于 当 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 8.2.6(a).jjpg、8.2.6(b).jjpg 两 幅 素材 图 像 ， 如 
图 8-39 所 示 。 


Foie 
人 | 


并 Ha) 2018.05:282000 


0 本 


图 8-39 ”打开 素材 图 像 


02| 选择 工具 箱 中 的 多 边 形 套 索 工具 , 在 8.2.6(a).jpg 图 像 编辑 窗口 中 创建 一 个 选区 ， 
吉 图 8-40 ee 

切换 至 8.2.6(b).jpg 图 像 编 辑 窗口 ， 按 Ctrl+A 组 合 键 全 选 图 像 ， 如 图 8-41 所 示 。 

按 Ctrl+C 组 合 键 复制 图 像 ， 切 换 至 8.2.6(a)jpg 图 像 编辑 窗口 ， 按 Alt+Shift+ 
Ctrl+V 组 合 键 贴 入 图 像 ， 如 图 8-42 所 示 。 

按 Ctl+T 组 合 键 ， 调 出 变换 控制 框 ， 如 图 8-43 所 示 。 

移动 鼠标 指针 至 变换 控制 柄 上 ， 按 住 鼠 标 左 键 并 进行 拖 足 ， 适 当 缩 小 图 像 ， 按 
Enter 键 确 认 操 作 ， 效 果 如 图 8-44 所 示 。 
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萝 心动 单 品 限量 秒 入 萝 心动 单 品 限 量 秒 名 YY 心动 单 品 限量 秒 bd 
每 天 10 训 开 妈 每 天 10 点 开 抢 外 天 10 卢 开 抢 
【5.18-5.20 VIP 提 草 挫 ) (5.18-5.20 VIP 提前 抢 ) (5. 18- + 20 VIP 者 前 失 ) 
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2 3 密 z 2 3 密 
图 8-40 创建 选区 
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图 8-42 贴 入 图 像 
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图 8-43 ” 调 出 变换 控制 框 图 8-44 ”最 终 效果 
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专家 指点 》) 


使 用 多 边 形 套 索 工具 创建 选区 时 ， 按 住 Shift 键 的 同时 单 击 息 标 左 键 ， 可 以 沿 水 平 、 
垂直 或 45” 角 方向 创建 选区 。 


8.2.7 ”磁性 套 索 工具 | 


在 Photoshop CC 中 ， 磁 性 套 索 工具 是 套 索 工具 组 中 的 选取 工具 之 一 。 在 移动 UI 的 设计 
过 程 中 ， 使 用 磁性 套 索 工具 可 以 快速 选择 与 背景 对 比 强 烈 并 且 边 绿 复杂 的 对 象 ， 它 可 以 沿 着 
图 像 的 边 绿 生成 选区 进行 抠 图 与 合成 处 理 。 

选择 磁性 套 索 工 具 后 ， 其 工具 属性 栏 如 图 8-45 所 示 。 


L 2 3 
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i 岂 -| 国 四 巴西 | 下 k: [0 仿 素 | [ 湾 人 占 
图 8-45 ”磁性 套 索 工具 属性 栏 
磁性 套 索 工具 的 工具 属性 栏 中 各 选项 的 主要 含义 如 下 。 
基 宽 度 : 表示 以 光标 中 心 为 准 ， 其 周围 有 多 少 个 像素 能 够 被 工具 检测 到 。 如 果 对 象 的 边 
界 不 是 特别 清晰 ， 需 要 使 用 较 小 的 宽度 值 。 
加 对 比 度 ， 用 来 设置 工作 区 感应 图 像 边缘 的 灵敏 度 。 如 果 图 像 的 边缘 清晰 ， 可 将 该 数值 
设置 得 高 一 些 ， 反 之 ， 则 设置 得 低 一 些 。 
医 四 频率 : 用 来 设置 创建 选区 时 生成 销 点 的 数量 ， 如 图 8-46 所 示 。 


“频率 ”为 10 “频率 ”为 100 


图 8-46 不同“ 频率 ” 值 生 成 的 锚 点 数量 不 同 


区 是 使 用 绘图 板 压力 以 更 改 钢笔 宽度 图 : 在 计算 机 配置 有 数位 板 和 压 感 笔 ， 单 击 此 按钮 ， 
Photoshop 会 根据 压 感 笔 的 压力 自动 调整 工具 的 检测 范围 。 
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使 用 磁性 套 索 工具 自动 创建 边界 选区 时 ， 按 Delete 键 可 以 删除 上 一 个 锚 点 和 线段 。 
车 套 索 工具 选择 边线 没有 贴近 被 选 图 像 ， 可 以 在 被 选 图 像 相 应 区 域 上 单 击 和 鼠标 左 键 ， 手 


动 添加 一 个 锚 点 ， 然 后 将 其 调整 至 合适 位 置 。 
下 面 介 绍 运 用 磁性 套 索 工具 抠 图 的 操作 方法 。 


8. 2.7 内 容 
请 扫 二 维 码 


去 ;党 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 8-47 所 示 。 
去; 党 02| 选取 工具 箱 中 的 磁性 套 索 工具 ， 在 工具 属性 栏 中 设置 “羽化 ”为 0 像素 ， 沿 着 
素材 图 像 中 图 标的 边缘 拖 电 鼠标 指针 ， 如 图 8-48 所 示 。 


bi 入 家 | 打开 展 滩 窗 才 可 能 用 关键 
能 ! ! ! 能 ! ! ! 


(接收 朋友 私信 、 直播 实时 互动 连 麦 一 起 (接收 朋友 私信 、 直播 实时 互动 、 连 麦 一 起 
游戏 ) 游戏 ) 


图 8-47 ”打开 素材 图 像 图 8-48 沿边 缘 处 移动 鼠标 


执行 上 述 操作 后 ， 将 鼠标 指针 移 至 起 始点 处 ， 单 击 鼠 标 左 键 ， 即 可 创建 选区 ， 
选区 的 效果 如 图 8-49 所 示 。 

按 Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 最 终 
效果 如 图 8-50 所 示 。 
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下 打开 且 浮 窗 才 可 使 用 关键 功 
1 1 ! 


(接收 朋友 私信 、 直播 实时 互动 连 麦 一 起 
游戏 ) 


图 8-49 创建 选区 图 8-50 最终 效果 


8.2.8 魔术 橡皮 擦 工具 JU 


在 移动 UI 的 设计 过 程 中 ,使 用 魔术 橡皮 擦 工具 可 以 自动 擦 除 当 前 图 层 中 与 选中 颜色 相 
近 的 像素 。 下 面 介绍 使 用 魔术 橡皮 擦 工具 抠 图 的 操作 方法 。 


g 台 中 01 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 如 图 8-51 所 示 。 
丈 河 02| 选取 工具 箱 中 的 魔术 橡皮 擦 工具 ， 如 图 8-52 所 示 。 


图 8-51 素材 图 像 图 8-52 ”选取 魔术 橡皮 擦 工具 


界面 合成 : 用 。 
44 移动 UI 图 像 抠 取 与 合成 


更 河 03| 在 图 像 编辑 窗口 中 单 击 鼠 标 左 键 ， 即 可 控 除 图 像 ， 如 图 8-53 所 示 。 
gE 建 当 04| 使 用 与 上 述 同样 的 方法 ， 擦 除 多 余 背 景 图 像 ， 获 得 抠 图 效果 ， 如 图 8-54 所 示 。 


图 8-53 ” 擦 除 图 像 图 8-54 ”最终 效果 


专家 指点 》) 


使 用 魔术 橡皮 探 工具 可 以 探 除 图 像 中 所 有 与 鼠标 指针 单 击 处 颜色 相近 的 像素 。 当 在 
被 锁定 透明 像素 的 普通 图 层 中 擦 除 图 像 时 ， 被 擦 除 的 图 像 将 显示 为 背景 色 ; 当 在 背景 图 
层 或 首 通 图 层 中 擦 除 图 像 时 ， 被 擦 除 的 图 像 将 显示 为 史明 色 ，。 


8.2.9 钢笔 工具 OD 
在 移动 UI 的 设计 过 程 中 ， 钢 笔 工 具 儿 是 最 常用 的 路 径 绘制 工具 ， 可 以 创建 直线 和 平滑 
流畅 的 曲线 。 钢 笔 工 具 创建 形状 路 径 ， 通 过 编辑 路 径 的 销 氮 ， 可 以 很 方便 地 改变 路 径 的 形状 。 
选择 工具 箱 中 的 钢笔 工具 后 ， 其 工具 属性 栏 如 图 8-55 所 示 。 
L 2 3 有 0405 6 


pe J EEC 
图 8-55 ”钢笔 工具 属性 栏 
钢笔 工具 的 工具 属性 栏 中 各 选项 的 主要 含义 如 下 。 
医 国 路 径 : 该 列表 框 中 包括 “图 形 ” “路 径 ” 和 “像素 ”3 个 选项 。 
加 建立 ; 该 选项 区 中 包括 有 “选区 ”“ 蒙 版 ”和 “形状 ”3 个 按钮 ， 单 击 相应 的 按钮 可 
以 创建 选区 、 蒙 版 和 图 形 。 
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医 并 路径 操作 按钮 : 该 列表 框 中 有 “新 建 图 层 ”“ 合 并 形状 ”“ 减 去 顶层 形状 ”“ 与 形 
状 区 域 相交 ”“ 排 除 重合 形状 ”以 及 “合并 形状 组 件 ”6 种 路 径 操作 选项 ， 可 以 选择 相应 的 
选项 ， 对 路 径 进行 操作 。 

攻 路 径 对 齐 方 式 按钮 : 该 列表 框 中 有 “左边 ”“ 水 平 居 中 ”右边 ”“ 顶 边 ”“ 垂 直 居 中 ”“ 底 
边 ”“ 按 宽度 均匀 分 布 ”““ 按 高 度 均 匀 分 布 ”““ 对 齐 到 选区 以 及 “对 齐 到 画布 ”10 种 路 径 
对 章 方式 ， 可 以 选择 相应 的 选项 对 齐 路 径 。 

上 路 径 排列 方式 按钮 : 该 列表 框 中 有 “将 形状 置 为 顶层 ”“ 将 形状 前 移 一 层 ”“ 将 形 
状 后 移 一 层 ” 以 及 “将 形状 置 为 底层 ”4 种 排列 方式 ， 可 以 选择 相应 的 选项 排列 路 径 。 

区 站 自动 添加 /删除 ， 勾 选 该 复 选 框 后 ， 可 以 增加 和 删除 锚 点 。 

下 面 介绍 使 用 钢笔 工具 抠 图 的 操作 方法 。 


现 河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 8-56 所 示 。 
步骤 选取 工具 箱 中 的 钢笔 工具 区 ， 如 图 8-57 所 示 。 


rs ple7 i 国 Pong 


图 8-56 ”打开 素材 图 像 图 8-57 ”选择 钢笔 工具 


路 径 是 Photoshop CC 中 的 强大 功能 ， 它 是 基于 贝 塞 尔 曲 线 建 立 的 矢量 图 形 ， 所 有 使 
用 夭 量 绘图 软件 制作 的 线条 ， 原 则 上 都 可 以 称 为 “路 径 ”。 

路 径 是 通过 钢笔 工具 或 形状 工具 创建 出 的 直线 和 曲线 ， 因 此 ， 无 论 路 径 缩小 或 放大 
都 不 会 影响 其 分 辨 率 。 
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步骤 将 鼠标 指针 移 至 图 像 编 辑 窗口 的 合适 位 置 ， 单 击 鼠 标 左 键 ， 绘 制 路 径 的 第 1 个 
点 ， 如 图 8-58 所 示 。 

步骤 将 鼠标 指针 移 至 另 一 位 置 , 单 击 鼠 标 左 键 并 拖 电 , 至 适当 位 置 后 释放 鼠标 左 键 ， 
绘制 路 径 的 第 2 个 点 ， 使 用 与 上 述 同 样 的 方法 依次 绘制 出 第 4 点 ， 如 图 8-59 所 示 。 


图 8-58 绘制 路 径 的 第 1 点 图 8-59 绘制 路 径 第 4 点 


2 枕 浏 05| 再 次 将 鼠标 指针 移 至 合适 位 置 ， 单 击 鼠 标 左 键 并 拖 忠 至 合适 位 置 ， 释 放 鼠 标 左 
键 ， 绘 制 路 径 的 第 6 个 点 ， 如 图 8-60 所 示 。 
这 潭 06| 用 与 上 述 同 样 的 方法 ， 依 次 单 击 鼠标 左 键 ， 创 建 路 径 ， 效 果 如 图 8-61 所 示 。 


图 8-60 ”绘制 路 径 的 第 6 点 图 8-61 绘制 路 径 
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天 07| 按 Ctrl+Enter 组 合 键 ， 将 路 径 转换 为 选区 ， 如 图 8-62 所 示 。 
去; 过 08| 按 Ctrl+J 组 合 键 复 制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 图 像 被 抠 取 出 来 效果 
如 图 8-63 所 示 。 


图 8-62 ”将 路 径 转 换 为 选区 图 8-63 ” 抠 图 效果 
8.2.10 自由 钢笔 工具 JU 
在 移动 UI 的 设计 过 程 中 ， 使 用 自由 钢笔 工具 | 消 | 可 以 随意 绘图 ， 不 需要 像 使 用 钢笔 工具 


那样 通过 锚 点 来 创建 路 径 。 
自由 钢笔 工具 的 工具 属性 栏 与 钢笔 工具 的 工具 属性 栏 基本 一 致 , 只 是 将 “自动 添加 /删除 ” 
变 为 “磁性 的 ” 复 选 框 ， 如 图 8-64 所 示 。 


EAE 


建立 : [ 这 区 ..，]|[ 蒙 版 | HK ] 砧 区 车 | 交口 到 性 的 癌 对 齐 过 有 
图 8-64 ”自由 钢笔 工具 的 工具 属性 栏 


下 面 详细 介绍 使 用 自由 钢笔 工具 抠 图 的 操作 方法 。 


8.2. 10 内 容 
请 扫 二 维 码 


pg 台 01 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 8-65 所 示 。 
二 02| 选取 工具 箱 中 的 自由 钢笔 工具 消 |， 在 工具 属性 栏 中 色 选 “磁性 的 ” 复 选 框 ， 
如 图 8-66 所 示 。 


re 


“和 和 


界面 合成 : 
4 移动 UI 图 像 抠 取 与 合成 


姑 8 济 


污 简 由 视图 V ”窗口 (W) 帮 
四 屁 * 叙 | 状 .V 说 性 的 


勾 选 


图 8-65 ”打开 素材 图 像 图 8-66 ” 勾 选 “磁性 的 ” 复 选 框 


在 Photoshop CC 中 提供 了 两 种 用 于 选择 路 径 的 工具 ， 如 果 在 编辑 过 程 中 要 选择 整 条 
路 径 ， 可 以 使 用 路 径 选 择 工具 息 ; 如 果 只 需要 选择 路 径 中 的 某 一 个 锚 点 ， 则 可 以 使 用 直 


接 选 择 工具 慌 ， 
去; 党 03| 移动 鼠标 指针 至 图 像 编辑 窗口 中 ， 单 击 鼠 标 左 键 ， 确 定 起 始 位 置 ， 如 图 8-67 
所 示 。 


证 淹 04| 沿 图 像 边缘 拖 虹 鼠标 指针 ， 至 起 始点 处 ， 单 击 鼠 标 左 键 ， 创 建 闭 合 路 径 ， 如 
8-68 所 不 。 


图 8-67 确认 起 始 位 置 图 8-68 ”创建 闭合 路 径 
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5 当 05| 按 Ctrl+Enter 组 合 键 ， 将 路 径 转 换 为 选区 ， 如 图 8-69 所 示 。 
一 河 06| 按 Ctrl+J 组 合 键 复制 一 个 新 图 层 ， 并 隐藏 “背景 ”图 层 ， 效 果 如 图 8-70 所 示 。 


图 8-69 ”将 路 径 转 换 为 选区 图 8-70 抠 图 效果 


专家 指点 》) 


选择 “窗口 |“ 路径” 命令， 展开“ 路径 ”面板 ， 当 创建 路 径 后 ， 在 “路 径 ” 面板 
中 就 会 自动 生成 一 个 新 的 工作 路 径 ， 如 图 8-71 所 示 。 


全 | 口交 加 回国 上 年 


图 8-71 “路 径 ” 面 板 
“路 径 ” 面 板 中 各 选项 的 主要 含义 如 下 。 
加 工作 路 径 : 显示 了 当前 文件 中 包含 的 临时 路 径 和 矢量 蒙 版 。 
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界面 合成 : 
《 式 X《《K 移动 UI 图 像 抠 取 与 合成 


加 用 前 景色 填充 路 径 : 可 以 用 当前 设置 的 前 景色 填充 被 路 径 包 围 的 区 域 。 
EE 国 用 画笔 描 边 路 径 ， 可 以 用 当前 选择 的 绘图 工具 和 前 景色 沿路 径 进 行 描 边 。 
区 国 将 路 径 作 为 选区 载 入 ， 可 以 将 创建 的 路 径 作 为 选区 载 入 。 

国 国 从 选区 生成 工作 路 径 : 可 以 将 当前 创建 的 选区 生成 为 工作 路 径 。 

区 添加 图 层 蒙 版 :可 以 为 当前 图 层 创建 一 个 图 层 蒙 版 。 

创建 新 路 径 : 可 以 创建 一 个 新 路 径 层 。 

攻 国 删除 当前 路 径 : 可 以 删除 当前 选择 的 工作 路 径 。 


Re 


本 章 重 点 导航 


@ 编辑 智能 渡 镜 

@ 添加 波浪 效果 

@ 添加 玻璃 效果 

@ 添加 水 波 效果 

@ 添加 旋转 扭曲 效果 
四 添加 点 状 化 效果 
@ 添加 彩 块 化 效果 


学 习 提示 


Phoroshop 提供 了 多 种 滤 镜 ,包括 6 种 独立 特殊 渡 镜 和 14 种 特效 滤 镜 ， 即 
可 以 为 移动 UI 图 像 制作 丰富 多 彩 的 艺术 效果 。 本 章 主 要 讲解 运用 滤 镜 制作 各 种 
特效 质感 的 方法 ， 渡 镜 功 能 是 本 章 的 重点 和 难点 。 


〇 添加 液化 的 方法 

@ 使 用 滤 镜 库 编辑 的 方法 
〇 添加 切 变 的 方法 

〇 添加 波纹 的 方法 

〇 添加 海洋 波纹 的 方法 

@ 添加 扩散 亮光 的 方法 

@ 创建 智能 滤 镜 
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9.1 特效 解析 : 为 移动 U1 图像 添 加 简单 的 特效 


在 移动 UI 的 设计 中 ，UI 素材 图 片 的 简单 特效 处 理 ， 能 够 为 界面 带 来 更 好 的 视觉 感受 ， 
本 市 将 讲解 一 些 初 级 的 U 特效 处 理 技巧 。 


9.1.1 编辑 智能 滤 镜 | 


在 Photoshop CC 中 为 移动 UI 图 像 创建 智能 滤 镜 后 ， 可 以 根据 需要 反复 编辑 所 应 用 的 渡 
镜 参 数 。 展 开 “ 图 层 ” 面 板 ， 如 图 9-1 所 示 ， 将 鼠标 指针 移 至 “图 层 1” 图 层 中 的 “球面 化 
滤 镜 效果 图 层 上 。 双 击 鼠 标 左 键 ， 阐 出 “球面 化 ”对 话 框 ， 如 图 9-2 所 示 。 然 后 设置 “模式 ” 
为 “水 平 优先 ”， 单 击 “ 确 定 ” 按 钮 ， 即 可 编辑 智能 滤 镜 ， 效 果 如 图 9-3 所 示 。 


四 OTH 
| 
让 证: 回 /中 日。 坟 充 : [100%]- 


试 驾 有 有害， 
DO fr. 回 _©. 外 加 会 《 < 
9-1 移动 鼠标 至 相应 位 置 图 9-2 设置 选项 9-3 ”编辑 智能 滤 镜 效果 
9.1.2 添加 波浪 效果 JW 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “波浪 ” 滤 镜 可 以 在 图 像 上 创建 类 似 于 波浪 起 
伏 的 效果 。 在 需要 编辑 的 移动 UI 图像 中 , 如 图 9-4 所 示 , 选择 “ 滤 镜 ”| 扭曲 “| 波浪 ”命令 ， 
弹出 “波浪 ”对 话 框 , 保持 默认 设置 , 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 波浪 效果 ， 如 图 9-5 
所 未。 


界面 特效 -. 医 
<<<<%<《 移动 UI 图 像 特效 质感 设计 颈 


立即 报名 ， 立即 报名 ， 
图 9-4 原 图 图 9-5 ”波浪 效果 
9.1.3 添加 玻璃 效果 OY 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使用“ 玻璃” 滤 镜 可 以 使 图 像 具 有 像 是 透 过 不 同类 
型 的 玻璃 进行 观看 的 效果 。 单 击 “ 滤 镜 | 扭曲 | 玻璃 命令 , 弹出 “玻璃 ”对 话 框 , 设置 “ 纹 
理 ” 为 “ 块 状 ”， 如 图 9-6 所 示 , 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 玻璃 效果 ， 如 图 9-7 所 示 。 
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图 9-6 设置 参数 图 9-7 玻璃 效果 


9.1.4 添加 水 波 效 果 OD 


在 Photoshop 中 设计 移动 UI 图 像 时 ,使 用 “水 波 ” 滤 镜 可 以 在 图 像 上 创建 水 面 波 纹 荡 澜 
效果 。 打 开 需 要 编辑 的 移动 UI 图像， 如 图 9-8 所 示 ， 选 择 “ 洲 镜 ”| “扭曲”| “水波” 命令 。 
弹出 “水 波 ” 对 话 框 ， 设置“ 数量” 与“ 起伏” 参数 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 
水 波 效 有 果 ， 最 终 效 采 如 图 9-9 所 示 。 
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点 击 开 局 电击 开局 


图 9-8 原 图 图 9-9 ”水 波 效 果 


9.1.5 添加 旋转 扭曲 效果 oD| 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “旋转 扭曲 ” 滤 镜 可 以 沿 顺 时 针 或 者 逆 时 针 方 
向 围绕 图 像 中心 旋 转 图 像 。 

打开 需要 编辑 的 移动 UI 图像 ， 如 图 9-10 所 示 , 选择 “ 滤 镜 " |“ 扭曲 ”| “旋转 扭曲 ”命令 ， 
弹出 “旋转 扭曲 ”对 话 框 ,设置 “角度 ”为 65”,， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 旋转 
扭曲 效果 ， 如 图 9-11 所 示 。 


《 ” 炫 彩 动态 邀请 函 宣传 兹 富 客 《< ” 炫 彩 动态 邀请 函 宣传 紫 安 名 


图 9-10 ” 原 图 图 9-11 旋转 扭曲 效果 


9.1.6 添加 点 状 化 效果 JU 
在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “点 状 化 ” 滤 镜 可 以 使 图 像 唱 块 化 ， 在 唱 块 间 
产生 空 阶 ， 空 隙 内 用 背景 色 填 充 ， 通 过 “单元 格 大 小 ”选项 来 控制 唱 块 的 大 小 。 
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打开 需要 编辑 的 移动 UI 图像 ， 如 图 9-12 所 示 , 选择 “ 滤 镜 ”|“ 像 素 化 ”|“ 点 状 化 ”命令 ， 
弹出 “点 状 化 ”对 话 框 ， 设 置 “ 单 元 格 大 小 ”为 3， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添加 点 
状 化 效果 ， 如 图 9-13 所 示 。 


图 9-12 原 图 图 9-13 ”添加 点 状 化 效果 
9.1.7 添加 彩 块 化 效果 DO 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使用“ 彩 块 化 ” 滤 镜 可 以 将 纯色 或 近似 色 的 像素 结 
成 相近 颜色 的 像素 块 。 选 择 “ 滤 镜 ”|“ 像 素 化 ”|“ 彩 块 化 ”命令 ， 即 可 为 图 像 添 加 彩 块 化 效 
果 ， 如 图 9-14 所 示 。 


i ei [= a pe sse se [a |] 


图 9-14 为 图 像 添加 彩 块 化 效果 
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9.2 特效 实 操 : 为 移动 U1 图像 添 加 复杂 的 特效 


在 移动 UI 的 制作 过 程 中 需要 不 断 地 创新 ， 以 创造 新 的 视觉 亮 态 。 本 市 将 讲解 如 何 应 用 
Photoshop 中 的 一 些 操 作 来 实现 UI 的 视觉 创新 。 


97 专家 指点 2 


Photoshop 是 一 款 十 分 优秀 的 图 像 处 理 软件 ， 功 能 强大 ， 对 于 素材 图 像 的 处 理 不 仅仅 
是 局 限于 在 原 图 的 基础 上 进行 美化 ， 还 可 以 应 用 命令 操作 对 图 像 进行 一 种 另类 的 创新 。 


9.2.1 添加 彩色 半 调 的 方法 oD| 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “彩色 半 调 ” 滤 镜 可 以 模拟 在 图 像 的 每 个 通道 


一 河 01| 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 选 择 “ 图 层 1” 图 层 ， 如 
图 9-15 所 示 。 


手机 摄影 大 全 


8.9 
病 坎 去 均 才 
| 想 计 | 在 读 | 读 过 妇女 安 女 妆 | 
站 在 线 试 读 
六 在 豆 狼 购买: 纸 质 版 /电子 书 Y9.99 起 OO 大 四 OO. 生 亩 


图 9-15 ”选择 图 层 
2 碗 河 02| 选择 “ 滤 镜 ”|“ 像 素 化 ”|“ 彩 色 半 调 ” 命 令 ， 如 图 9-16 所 示 。 
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素 扩 


纹理 | 
你 素 化 

浑 深 

艺术 效果 

杂 色 

主 三 


Imagenomic 


图 9-16 选择 “色彩 半 调 ”命令 
弹出 “彩色 半 调 ”对 话 框 ,设置 “最 大 半径 ”为 8 像素， 如 图 9-17 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 彩色 半 调 效果 ， 如 图 9-18 所 示 。 
选择 “编辑 ”|“ 渐 隐 彩 色 半 调 ” 命 令 ， 弹出“ 渐 隐 ”对 话 杠 ,设置 “不 透明 度 ” 
为 80%、“ 模 式 ” 为 “ 柔 光 ”， 单 击 “ 确 定 ” 按 钮 ， 即 可 制作 出 渐 隐 恋 镜 图 像 效 果 ， 最 终 效 
果 如 图 9-19 所 示 。 


一 -一 


最 大 半径 (R): (像素 ) Gms 


网 角 ( 度 ): 


通道 1 (1): 
通道 2C): 
通道 (3) 想 读 在 读 读 过 次 六 次 个 丰 想 读 在 读 读 过 人 女 从 信人 女 售 
“xh 
通道 4 (4): 在 线 试 读 在 线 试 读 
在 豆 斩 购买: 纸 质 版 /电子 书 ¥9.99 起 在 豆 斩 购买 : 纸 质 版 /电子 书 ¥9.99 起 
9-17 设 站 参数 9-18 ”添加 色彩 半 调 效果 9-19 “最终 效果 


9.2.2 添加 液化 的 方法 | 


在 Photoshop CC 中 ， 特 殊 滤 镜 是 相对 于 众多 滤 镜 组 中 的 滤 镜 而 言 的 ， 其 相对 独立 ， 但 功 
能 强大 ， 使 用 频率 也 较 高 。 

在 Photoshop 中 设计 移动 UI 图像 时 ， 使用“ 液化” 滤 镜 可 以 模拟 液化 流动 的 效果 ， 可 以 
对 图 像 进行 弯曲 、 旋 转 、 扩 展 和 收缩 等 。 下 面 详细 介绍 为 移动 UI 图 像 添 加 液化 效果 的 操作 
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2 且 河 01| 选择 “文件 ” |“ 打开” 命令， 打开 一 幅 素材 图 像 ， 如 图 9-20 所 示 。 
pm 02| 选择 “ 滤 镜 ”|“ 液 化 ”命令 ， 弹 出 “液化 ”对 话 框 ， 如 图 9-21 所 示 。 


图 9-20 ” 原 图 图 9-21 液化 对 话 框 


型 河 03| 单 击 “ 向 前 变形 工具 ”按钮 [ 园 ， 移 动 鼠 标 指针 至 缩 略图 中 的 红心 图 像 上 ， 单 击 
鼠标 左 键 并 拖 电 ， 重 复 操作 ， 以 调整 图 像 形 状 ， 如 图 9-22 所 示 。 


pg 曙 上 04| 执行 上 述 操作 后 , 单 击 “ 确定 按钮 , 即 可 制作 出 “液化 效果 , 如 图 9-23 所 示 。 


全 | 蛇 注意 | 玉 同属 


图 9-22 调整 形状 图 9-23 ”最终 效果 


站 184 


“和 和 


界面 特效 医 
CLKK 移动 UI 图 像 特效 质感 设计 


9.2.3 _ 使 用 滤 镜 库 编 辑 移动 U1 图 像 的 方法 


滤 镜 库 是 Photoshop 滤 镜 的 一 个 集合 体 ， 在 此 对 话 框 中 包括 了 绝 大 部 分 的 内 置 着 镜 ， 如 
图 9-24 所 示 ， 可 以 实现 移动 UI 图 像 的 各 种 特殊 效果 。 


9-24 “ 滤 镜 库 ” 对 话 框 
下 面 详细 介绍 掌 担 涛 镜 库 编 辑 移动 UI 图 像 的 操作 方法 。 


辽河 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 选 择 “图 层 1” 图 层 ， 如 
图 9-25 所 示 。 


Q、 搜索 感 兴趣 的 内 容 .. + 


每 日 精 选 ”Class 美学 社 悦 食 记 ”小生 泽 


图 9-25 选择 “图 层 1” 图 层 
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选择 “ 渡 镜 ”|“ 渡 镜 库 ”命令 ， 在 弹出 的 对 话 框 中 选择 “艺术 效果 ”|“ 木 刻 ” 
选项 ， 如 图 9-26 所 示 。 


p 丸 当 03| 单 击 “ 确 定 ” 按 钮 ， 为 图 像 应 用 “木刻 ” 滤 镜 效果 ， 如 图 9-27 所 示 。 


oii 四 多 局 自 
-了 英 学 社 心 研究 小 生活 职场 带 
找 片 菇 粒 
se Ne Y 
由 365 天 成 为 更 好 的 自己 ， 

加 入 少女 感 养 成 学 院 “ 乡 

ECE 四 

至 PT 

向 

图 9-26 ”选择 “木刻 ”选项 图 9-27 应 用 “木刻 ” 流 镜 效 果 


2 型 河 04| 选择 “编辑 ”|“ 渐 隐 滤 镜 库 ”命令 ， 弹 出 “ 渐 隐 ” 对 话 框 ， 设 置 “ 不 透明 度 ” 
为 80%、“ 模 式 ” 为 “ 柔 光 ”, 单 击 “ 确 定 ” 按钮， 即 可 制作 出 渐 隐 滤 镜 图 像 效 果 ， 如 图 9-28 
所 未。 


中 英 切 (D Ctrl+X 
拷贝 (C) Ctrl+C 
合并 拷贝 (Y) Shift+Ctrl+C 
类 贴 (p) Ctrl+V 


填充 (L).. Shift+F5 


WY 
内 容 识别 比例 。 Alt+Shift+Ctrl+C 省 9 5 天 万 为 更 好 好 的 自 局 : 
少 养 成 学 院 “ 
扣 近 变形 
自由 变 挨 (P) Ctrl+T a 


全。 
x ED 
自动 对 齐 图 层 .. 5 动 课 《ERED 全 部 


写 动 混合 图 层 … 
定义 画笔 预 设 ([B)… 


图 9-28 ”最终 效果 


9.2.4 ”添加 切 变 的 方法 | 


使 用 “ 切 变 ”着 镜 ， 可 以 沿 一 条 曲线 扭曲 图 像 。 在 “ 切 变 ”对 话 框 中 ， 可 以 通过 拖 昌 框 
中 的 线条 或 添加 锁 点 来 设 定 扭曲 曲线 形状 。 
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下 面 介 绍 为 移动 UI 图 像 添 加 切 变 效果 的 操作 方法 。 


9.2.4 内 容 
请 扫 二 维 码 


证 浏 01| 选择 “文件 ”| “打开 ”命令 ,打开 一 幅 素材 图 像 ， 选 择 “ 背 景 ” 图 层 ， 如 图 9-29 
所 未。 
如 02| 选择 “ 滤 镜 ”|“ 扭 曲 ”|“ 切 变 ” 命 令 ， 如 图 9-30 所 示 。 


贸 充 | 3D(D) 视 因 (VV) 窗口 (W) 帮助 (H) 


镜头 校正 Cri+F | 有 和 
转译 力 埠 能 污 箭 (S) Pe 
视 出 (X).. 
渤 措 库 (G). 
证 透 应 广角 (A).. Alt+Shift+Ctrl+A 
Camera Raw 洲 强 (CO).,. Shift+Ctr|+ 和 从 
镀 头 校正 (R)-. Shi 和 +Ctrl+R 
渡 化 ().. Shift+Ctr|+X 
法 画 (DO).. 
发 专 生成 器 (P) 
沈 舌 点 (V).. AHt+Ctrl+V 
风格 化 》 
画笔 次 边 》 
EE | 
i 
锐 化 y 波纹 
祝 须 》 双 玩 .… 
素 深 ”| 海洋 波纹 
绞 理 P| 。 板 潍 标 ..… 
像素 化 | 搞 压 .. 
羡 | 扩 侈 况 光 .- 
rm , ET 
双色 | 球 轩 化 ..… 
人 
图 9-29 原 图 图 9-30 ”选择 命令 


元 河 03| 弹出 “ 切 变 ”对 话 框 ， 在 其 中 设置 各 选项 ， 如 图 9-31 所 示 。 
元 河 04| 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 切 变 效果 ， 如 图 9-32 所 示 。 


未 定义 区 域 : 


| 回 折 回 @) 
]) 重复 边缘 像素 R) 


图 9-31 设置 各 项 图 9-32 最 终 效果 
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切 变 对 话 框 中 各 主要 选项 含义 如 下 。 
@ “ 折 回 ”: 选中 该 单 选 按钮 ， 则 在 空白 区 域 中 填 入 溢出 图 像 之 外 的 图 像 内 容 。 
@ “重复 边缘 像素 ”: 选中 该 单 选 按钮 ， 将 按 指定 的 万 向 扩充 图 像 的 边缘 像素 。 


9.2.5 添加 波纹 的 方法 | 
“波纹 ” 滤 镜 与 “波浪 ” 滤 镜 的 工作 方式 相同 ， 但 是 提供 的 选项 较 少 ， 只 能 控制 图 像 中 
的 波纹 数量 和 大 小 。 
下 面 介 绍 为 移动 UI 图 像 添 加 波纹 的 操作 方法 。 


玉江 01 打开 一 幅 素 材 图 像 ， 如 图 9-33 所 示 ， 选 择 “ 图 层 2” 图 层 。 
9 运河 02 | 选择 “ 滤 镜 ”|“ 扭 曲 ”|“ 波 纹 ” 命 令 ， 如 图 9-34 所 示 。 


3D(D) ”视图 (V) ”窗口 (W) 者 助 (H) 
深 绞 Ctrl+F 
读 泽 为 千 能 小 漠 (S) 
摘出 (X).. 

访 漠 库 (G).… 

自 适 应 广角 (A).. AK+Shif+Ctrl+A 
Camera Raw 污 滴 (C). Shift+Ctrl+A 
第 头 校 正 (R).. Shift+Ctrl+R 
液化 ().. Shift+Ctrl+X 


4 | 中 | 50 模式 < 


ES 快捷 方式 
AR 妆 窗口 小 部 件 


> oe & ,A » A a v 
上 


TY 人 


图 9-33 原 图 图 9-34 ”选取 命令 


加 洒 03| 执行 上 述 操 作 后 , 弹出 “波纹 ”对 话 框 , 设置 “大 小 ”为 “大 ”, 如 图 9-35 所 示 。 
天 河 04| 单 击 “确定 ”按钮 ， 即 可 为 图 像 添 加 波纹 效果 ， 如 图 9-36 所 示 。 
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ee AN rr 快捷 方式 > Ns Fr 2 
de 9 BR 窗口 小 部 件 人 旋 y Re 
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图 9-35 设置 相应 参数 图 9-36 ”最 终 歼 果 


9.2.6 ”添加 海洋 波纹 的 方法 | 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “海洋 波纹 ” 滤 镜 可 以 将 随机 分 隔 的 波纹 添加 
到 图 像 表面 ， 使 图 像 看 上 去 像 是 在 水 中 一 样 。 
下 面 介绍 为 移动 UI 图 像 添 加 海 详 波纹 的 操作 方法 。 


pg 于 01| 选择 “文件 ” |“ 打开” 命令 ， 打 开 一 幅 素材 图 像 ， 选 择 “ 图 层 1” 图 层 ， 如 
图 9-37 所 示 。 
p 妇 二 02| 选择 “ 滤 镜 ”|“ 扭 曲 ”|“ 海 洋 波纹 ”命令 ， 如 图 9-38 所 示 。 


3D(D) 视图 (V) 窜 口 (W) 帮助 (H) 
Ctrl+F 


芍 出 (为 .… 

污 满 库 (G). 

筷 适 上 应 广角 (A)... Alt+ Shift+Ctrl+A 
Camera Raw 沪 筑 ( 〇 ).. Shift+Ctrl+A 
镜头 校正 (R).. Shift+Ctrl+R 
液化 ( 册 ... Shift+Ctrl+X 
油画 (O)... 

图 案 生 成 器 (P). 

消失 点 (V). Ak+Ctrl+V 


模糊 
流浪 … 
锐 化 P| 波纹 .. 
视频 ， 下 琉 .… 
于 护 ER 
纹理 P| 极 举 标 ... 
像素 化 | 挤 压 ... 
心 .个 


图 9-37 打开 素材 图 像 图 9-38 ”选择 “海洋 波纹 ”他 令 
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3 对 03| 执行 上 述 操作 后 , 弹出 “海洋 波纹 ”对 话 框 , 保持 默认 设置 即 可 , 如 图 9-39 所 示 。 
地 当 04| 单 击 “确定 ”按钮 ， 即 可 为 图 像 添加 海洋 波纹 效果 ， 如 图 9-40 所 示 。 


图 9-39 设置 海洋 波纹 效果 图 9-40 ”最终 效果 


在 Photoshop 中 设计 移动 UI 图 像 时 ， 使 用 “ 极 坐标 ” 滤 镜 可 使 图 像 坐标 从 平面 坐标 
转换 为 极 坐标 ， 或 从 极 坐标 转换 为 平面 坐标 ， 产 生 一 种 图 像 极 度 变 形 的 效果 。 选 择 “ 滤 
镜 ”|“ 捏 曲 ”|“ 极 坐标 ”命令 ， 弹 出 “ 极 坐标 ”对 话 框 ， 保 持 默 认 设 置 即 可 ， 单 击 “确定 ” 
按钮 ， 即 可 为 图 像 添 加 极 坐标 效果 ， 如 图 9-41 所 示 。 


图 9-41 极 坐标 效果 
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9.2.7 ”添加 扩散 亮光 的 方法 时 


在 Photoshop 中 设计 移动 UI 图像 时 ,使 用 “扩散 亮光 ” 滤 镜 可 以 在 图 像 中 添加 白色 杂 色 ， 
并 从 图 像 中 心 向 外 渐 隐 高 光 ， 使 图 像 产生 一 种 光志 四 射 的 效果 。 
下 面 介绍 为 移动 UI 图 像 添 加 扩散 亮光 的 操作 方法 。 


be 细 5 二 01| 选择 文件 | 打开 命令 , 打开 一 幅 素材 图 像 ， 如 图 9-42 所 示 , 选择 图 层 1 
图 层 。 
2 弄 河 02| 选择 “ 滤 镜 ” |“ 扭曲”|“ 扩 散 亮 光 ” 命 令 ， 如 图 9-43 所 示 。 


世 友 | 30(0 视 四 W 。 坷 DtwW 帮助 (H) 
| ”扩散 突 光 Cul+F bs 


> 签到 领 红包 


© 领 金 豆 ， 玩 竞猜 


?4< 原 图 9-43 ”选取 命令 


时 吗 03| 执行 上 述 操作 后 ， 弹 出 “扩散 亮光 ”对 话 框 ， 保 持 默 认 设置 即 可 ， 如 图 9-44 
所 示 。 
3 于 04| 单 击 “ 确 定 ”按钮 ， 即 可 为 图 像 添 加 “扩散 亮光 ”效果 ， 如 图 9-45 所 示 。 


在 Photoshop 中 设计 移动 UI 图 像 时 ,使 用 “ 挤 压 ” 滤 镜 可 以 将 选区 内 的 图 像 或 者 整 
个 图 像 向 外 或 者 向 内 挤 压 。 选 择 “ 滤 镜 ” |“ 捏 曲 ”|“ 挤 压 ” 命 令 ， 弹 出 “ 挤 压 ”对 话 框 ， 
设置 数量 为 19%， 单 击 确定 按钮 ， 即 可 添加 挤 压 效果 ， 如 图 9-46 所 示 为 添加 挤 
压 效 果 前 后 的 图 像 对 比 。 


gd 
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要 闻 ”视频 长 沙 段子 电视 直播 汽车 十 
湖南 长 沙 雷阵雨 转 阴 气温 32/26 度 


长 沙 主 城 区 住房 供 不 应 。 ”esesegy 


求 , 芙 车 区 房价 洼地 选 哪 = 1 204A 
= 


湖南 人 必 看 ! 只 要 你 坐 公 
交 车 , 这 些 好 事 都 和 你 有 
关 


@ PP © 2 


>>>>> 


六 签到 领 红 包 


© 领 金 豆 ， 玩 竞猜 


毗 许 葡 到 7 天 


9-45 最终 效 果 


要 闻 ”视频 长 沙 段子 电视 直播 汽车 十 
湖南 长 沙 雷阵雨 转 阴 气温 32/26 度 


长 沙 主 城区 住房 供 不 应 。。 messesgy 
求 , 美 著 区 房价 洼地 选 哪 = Qi 


里 ES RA 


湖南 人 必 看 ! 只 要 你 坐 公 。 志 e 去 ) 
交 车 , 这 些 好 事 都 和 你 有 
关 


加 [> © 2 
Gd 所 二 美 砷 DE 


图 9-46 原 图 与 效果 图 对 比 


9.2.8 创建 智能 滤 镜 oD| 
智能 汇 镜 是 Photoshop CC Aik 当 所 选择 的 移动 UI 图 像 包 含 智能 对 象 并 


运用 了 滤 镜 后 ， 即 可 生成 一 个 镶 能 着 镜 


智能 小 镜 可 以 进行 反复 编辑 、 修 改 、 删 除 或 停 


用 等 操作 ， 但 图 像 所 应 用 的 滤 镜 效果 不 会 er 将 图 层 转 换 为 智能 对 象 才 能 应 用 智能 滤 镜 ， 
“图 层 ” 面 板 中 的 智能 对 象 可 以 直接 将 滤 镜 添加 到 图 像 中 ， 但 不 破坏 图 像 本 身 的 像素 。 
下 面 介绍 为 移动 UI 图 像 创 建 智能 滤 镜 的 操作 方法 。 


界面 特效 . 医 
《KKK 移动 Ul 图 像 特效 质感 设计 民 


选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素材 图 像 ， 如 图 9-47 所 示 ， 设 置 前 景 
色 为 白色 ， 在 “图 层 ”面板 中 ， 选 择 “图 层 1” 图 层 。 

9 过; 河 02| 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 智能 对 象 ”命令 ， 将 “图 层 
1” 图 层 中 的 图 像 转换 为 智能 对 象 ， 如 图 9-48 所 示 。 


# 梦 想 水 晶 球 # 

那 是 一 个 透明 到 几乎 看 不 见 的 灵 体 ， 而 灵 体 虽然 透明 ， 但 还 .-… 
链接 图 层 
选择 链接 图 屋 
拷贝 图 层 样 式 
粘贴 图 层 样 式 
清除 图 层 样式 
复制 形状 感性 
枯 贴 形状 尾 性 
从 隔 高 图 层 稳 放 
向 下 合并 
合并 可 见 图 层 
拼合 图 像 
无 熙 色 


# 一 起 来 看 流星 雨 禁 郑 蛮 检 张 翰 # 小 渔 对 上 官 发 脾 
乞 上 官 水 伪 伪 的 不 种 谱 汶 什么 


图 3-4/ 素材 图 9-48 转换 智能 对 和 象 


2 弄 湖 03| 选择 “ 滤 镜 ”|“ 扭 曲 ”|“ 球 面 化 ”命令 , 弹出 “球面 化 ”对 话 框 , 设置 “数量 ” 
为 30%， 单 击 “ 确 定 ” 按 钮 ， 即 可 生成 一 个 对 应 的 智能 滤 镜 图 层 ， 如 图 9-49 所 示 。 
2 碗 浏 04| 素材 图 像 呈 球面 化 滤 镜 效果 显示 ， 如 图 9-50 所 示 。 


# 梦 想 水 晶 球 # 
那 是 一 个 透明 到 几乎 看 不 见 的 灵 体 ， 而 灵 体 虽 然 透明 ,但 还 .-.… 


# 一 起 来 看 流星 雨 禁 郑 严 检 张 夫 # 小 渔 对 上 官 发 脾 
但 ”上 上 它 水 伪 伪 的 不 纪 畜 六 什 信 


图 9-49 ”设置 参数 图 9-50 ”最 终 效 果 
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在 添加 了 多 个 智能 滤 镜 的 情况 下 , 如 果 编 辑 先 添加 的 智能 滤 镜 , 将 会 弹出 信息 提示 框 ， 
提示 需要 在 修改 和 参数 后 才能 看 到 这 些 滤 镜 登 加 在 一 起 应 用 的 效果 。 


学 习 提示 
图 标的 制作 在 移动 UI 设计 中 占有 很 主要 的 地 位 ， 是 移动 UI 设计 中 不 可 或 
缺 的 一 部 分 。 在 移动 UI 设计 中 ， 图 形 的 应 用 范围 非常 广泛 ， 如 图 标 、 按 钮 、 自 


定义 控件 、 界 面 边框 和 界面 中 文字 效果 的 制作 等 ， 这 些 都 需要 基础 图 形 的 绘制 
打压 ， 可 以 说 UI 设计 的 基础 就 是 图 形 。 


本 章 重点 导航 


© 音乐 APP 图 标的 背景 效果 设计 ”© 切换 条 的 细节 效果 设计 

© 音乐 APP 图 标的 主体 效果 设计 ”OQ 搜索 框 的 主体 效果 设计 

@ 音乐 APP 图 标的 细节 效果 设计 @ 搜索 框 搜索 图 标的 效果 设计 
© 切换 条 的 背景 效果 设计 © 搜索 框 二 维 码 的 效果 设计 


@ 切换 条 的 主体 效果 设计 
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10.1 ”图 标 元 素 : 掌握 移动 UI 图 标的 设计 


如 今 ， 音 乐 已 经 成 为 人 们 生活 中 必 不 可 少 的 一 味 调剂 品 ， 移 动 客户 端 音 乐 产 品 的 竞争 也 
越 来 越 激烈 ， 纷 纷 推出 许多 个 性 十 足 的 新 功能 ， 让 人 眼花 缔 乱 。 图 标 是 用 户 接触 音乐 APP 的 
第 一 个 UI， 好 的 图 标 制作 可 以 使 音乐 APP 在 众多 同类 产品 中 吸引 用 户 的 关注 。 

本 市 主要 讲解 移动 UI 图 标 设计 的 操作 方法 。 

汪汪 10.1.1 内 容 二 绿 昌 。10.1.2 内 容 
请 扫 二 维 码 项 委 家 区 这 请 扫 二 维 码 


10. 1. 3 内 容 
请 扫 二 维 码 


10.1.1 音乐 APP 图 标的 背景 效果 设计 


下 面 主要 介绍 使 用 圆 角 和 矩形 工具 、“ 属 性 ”面板 、 渐 变 工具 、“ 内 发 光 ” 图 层 样式 、“ 投 
影 ” 图 层 样式 等 设计 音乐 APP 图 标的 背景 效果 。 

选择 “文件 ” |“ 新 建 ”命令 ， 弹 出 “新 建 ” 对 话 框 ， 设 置 “ 名 称 ” 为 “音乐 
APP 图 标 ”、“ 宽 度 ” 为 500 像素 、“ 高 度 ” 为 500 像素 、“ 分 辨 率 ”为 300 像素 /英寸 ， 
如 图 10-1 所 示 ， 单 击 “ 确 定 ” 按 钮 ， 新 建 一 个 空白 图 像 文件 。 

展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 如 图 10-2 所 示 。 


名 称 (N): 音乐 AP 也 | 标 [aa 
预 设 (P) 自 定 ”el 
小 | "| 
宽度 (W): 500 | 量 除 预 设 (D).… | 
高 度 (H): 500 
分 辩 率 (R): 300 像素 /英寸 

颜色 模式 (M): RGB 颜色 vv 8 位 

背景 内 容 (5C): 白色 


y | 高 级 


5 灰 . 回 @. 向 辐 兽 


图 10-1 新 建 空白 图 像 图 10-2 选择 图 层 


池河 03| 选择 工具 箱 中 的 圆 角 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “路 
径 ”、“ 半 径 ” 为 50 像素 ,绘制 一 个 圆 角 矩形 路 径 ， 如 图 10-3 所 示 。 


常用 元 素 : 此 
SS 图 标 、 图 形 、 按 钮 设 


更 河 04| 展开 “属性 ”面板 ， 设 置 W 和 互 均 为 400 像素 、 和 和 了 均 为 50 像素 ， 如 
图 10-4 所 示 。 


[mm 人 | 
[加 :][€ :lm 3 


回 so 像素 “| [5 像素 “| 四 
加 
回 ls 像素 “| [5 像素 “| 加 


图 10-3 ”绘制 圆 角 甜 形 路 径 10-4 设置 参数 


对 呈 05| 执行 上 述 操作 后 ， 即 可 修改 路 径 的 大 小 和 位 置 ， 如 图 10-5 所 示 。 
台 汪 06| 按 CtrltEnter 组 合 键 ， 将 路 径 转 换 为 选区 ， 如 图 10-6 所 示 。 


和 
Tea- 


10-5 ”修改 路 径 的 大 小 和 位 置 图 10-6 将 路 径 转 换 为 选区 


pg 莹 5 当 07| 选择 工具 箱 中 的 渐变 工具 ， 从 上 至 下 为 选区 填充 深蓝 色 (RGB 参数 值 为 2、 
32、83) 到 浅 蓝 色 (RGB 参数 值 为 172、195、243) 的 线性 渐变 ， 如 图 10-7 所 示 。 
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pg 蚤 08| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 10-8 所 示 。 


图 10-7 填充 线性 渐变 图 10-8 取消 选区 
二 09| 双击 “图 层 1” 图 层 , 弹出 “图 层 样 式 ” 对 话 框 , 勾 选 “内 发 光 ” 复 选 框 , 设置 “发 
光 颜 色 ” 为 白色 、“ 大 小 ”为 2 像素， 如 图 10-9 所 示 。 
本 可 10| 勾 选 “投影 ” 复 选 框 ， 保 持 默 认 设 置 ， 单 击 “ 确 定 ” 按 钮 ， 应 用 图 层 样 式 ， 如 
图 10-10 所 示 。 


图 10-9 设置 图 层 样 式 图 10-10 ”应 用 图 层 样式 


音乐 APP 图 标的 主体 效果 设计 


下 面 主要 介绍 使 用 自 定 形状 工具 、“ 投 影 ”图 层 样式 等 设计 音乐 APP 图 标的 主体 效果 。 
这 潭 01| 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 2” 图 层 ， 如 图 10-11 所 示 。 


_L-______________IN198 


“和 和 


常用 元 素 : 
图 标 、 图 形 、 按 钮 设计 


选择 工具 箱 中 的 自 定 形状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “路 
径 ”， 在 “形状 ”下 拉 列 表 中 选择 “ 穿 边 圆 形 边框 ”形状 ， 如 图 10-12 所 示 。 


| 
~ 
S| 


一 rr 一 一 
we Lh 
Tt. J 


图 10-11 新 建 图 层 图 10-12 选择 形状 样式 


在 图 像 编 辑 窗口 中 绘制 一 个 窜 边 圆 形 边框 路 径 ， 如 图 10-13 所 示 。 
按 CtrltEnter 组 合 键 ， 将 路 径 转换 为 选区 ， 如 图 10-14 所 示 。 


10-13 经 制 路 径 10-14 ”将 路 径 转 换 为 选区 


@ 台 呈 05| 设置 前 景色 为 白色 ， 按 AlttDelete 组 合 键 为 选区 填充 白色 ， 如 图 10-15 所 示 。 
按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 10-16 所 示 。 
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图 10-15 填充 白色 图 10-16 取消 选区 
更 河 07| 双击 “图 层 2” 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 勾 选 “ 投 影 ” 复 选 框 ， 取 消 
勾 选 “使 用 全 局 光 ” 复 选 框 ， 并 设置 “角度 ”为 30 度 ， 如 图 10-17 所 示 。 
2 一 河 08| 单 击 “ 确 定 ” 按 钮 ， 应 用 “投影 ”图 层 样式 ， 如 图 10-18 所 示 。 


混合 模式 (6): 正片 要 底 - ll 
不 透 胃 度 (0): 一 一 75 % 
角 层 (A): ( 司 。 厦 四 使 用 全 局 兴 (G) 


网 图 层 榨 空投 影山 


|_ 设 告 为 对 认 伍 | ， 夏 位 Xi 认 值 | 


10-17 设置 图 层 样 式 图 10-18 应 用 图 层 样 式 
专家 指点 》) 


使 用 图 层 样式 可 以 为 当前 图 层 添加 特殊 效果 ， 如 投影 、 内 阴影 、 外 发 光 及 浮雕 等 。 
在 不 同 的 图 层 中 应 用 不 同 的 图 层 样 式 ， 可 以 使 整 幅 图 像 更 加 富有 真实 感 ， 且 重点 突出 。 


10.1.3 音乐 APP 图 标的 细节 效果 设计 JU 


下 面 主 要 介绍 使 用 自 定 形状 工具 、 变 换 控 制 框 等 设计 音乐 APP 图 标的 细节 效果 。 

展开 “图 层 ” 面 板 ， 新 建 “ 图 层 3” 图 层 ， 如 图 10-19 所 示 。 

选择 工具 箱 中 的 自 定形 状 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “路 
径 ”， 在 “形状 ”下 拉 列 表 中 选择 “ 八 分 音符 ”形状 ， 如 图 10-20 所 示 。 
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“和 和 


an 


图 标 、 图 形 、 按 钮 设 ? 


图 (V) 。 窗口 (W) 帮助 (H) 


10-19 ”新 建 图 层 图 10-20 ”选择 形状 样式 
专家 指点 ) 
如 果 默 认 状 态 下 的 形状 效果 不 能 满足 工作 需要 ， 可 以 单 击 “形状 ”列表 框 右上 角 的 


按钮 ， 在 弹出 的 菜单 中 选择 “全 部 ”选项 ， 弹 出 提示 信息 框 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 
将 Photoshop CC 中 提供 的 所 有 预 设 形状 载 入 当前 的 “形状 ”列表 框 中 。 


2 元 河 03| 在 图 像 编辑 窗口 中 绘制 一 个 八 分 音符 路 径 ， 如 图 10-21 所 示 。 
步骤 按 Ctrl+Enter 组 合 键 ， 将 路 径 转 换 为 选区 ， 如 图 10-22 所 示 。 


至 号 
四 oTR 


图 10-21 经 制 路 径 图 10-22 将 路 径 转换 为 选区 
3 赔 05| 选择 “选择 ”| “修改” | “扩展 ” 命令, 弹出 “扩展 选区 ”对 话 框 , 在 其 中 设置 “ 扩 
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展 量 ” 为 10 像素 ， 如 图 10-23 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 即 可 扩展 选区 ， 如 图 10-24 所 示 。 


时 次 办 
HH A. OO. 加 同 会 .: 号 
EE 污 果 - 
00 灰 .四 ,名 辐 会 :| 


设置 前 景色 为 白色 ， 按 AlttDelete 组 合 键 为 选区 填充 白色 ， 如 图 10-25 所 示 。 
按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 10-26 所 示 。 


按 Ctrl+I 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 音符 图 形 的 大 小 和 位 置 ， 如 
图 10-27 所 示 。 
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图 标 、 图 形 、 按 钮 设计 


执行 上 述 操作 后 ， 按 Enter 键 确 认 操作 ， 如 图 10-28 所 示 。 


图 10-27 调整 音符 图 形 的 大 小 和 位 置 图 10-28 确认 调整 效果 
二 11 | 复制 “图 层 2” 图 层 的 图 层 样式 ， 并 将 其 粘贴 到 “图 层 3” 图 层 中 , 为 “图 层 3” 
图 层 添 加 图 层 样 式 。 可 以 将 制作 好 的 音乐 APP 图 标 应 用 到 应 用 程序 上 ， 以 查看 图 标 效 果 ， 如 
图 10-29 所 示 。 


10-29 ”最终 效果 
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10.2 ”图 形 元 素 : 掌握 移动 U| 控件 的 设计 


在 移动 UI 设计 中 ， 篆 见 控件 的 制作 也 是 十 分 重要 的 ， 进 度 条 、 滑 块 、 切 换 条 、 开 关 等 


控件 在 移动 UI 中 是 不 可 或 缺 的 重要 元 素 。 


10. 2. 1 内 容 10. 2. 2 内 容 10. 2. 3 内 容 
请 扫 二 维 码 请 扫 二 维 码 请 扫 二 维 码 
10.2.1 切换 条 的 背景 效果 设计 JU 
切换 条 在 移动 UI 特别 是 手机 APP 的 界面 中 是 很 第 见 的 。 下 面 主 要 使 用 裁剪 工具 等 制作 
切换 条 的 背景 效果 。 


g 旨 01| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 一 幅 素 材 图 像 ， 如 图 10-30 所 示 。 
pg 台 当 02| 选择 工具 箱 中 的 裁剪 工具 ， 调 出 裁剪 控制 框 ， 如 图 10-31 所 示 。 


图 10-30 打开 素材 图 像 图 10-31 苦 出 裁剪 控制 杠 


在 工具 属性 栏 中 设置 裁剪 控制 框 的 长 宽 比 为 1280 : 800， 如 图 10-32 所 示 。 

执行 上 述 操作 后 ， 即 可 调整 裁剪 控制 框 的 长 宽 比 。 将 鼠标 指针 移 至 裁剪 控制 框 
内 ， 按 住 鼠 标 左 键 的 同时 拖 中 图像 至 合适 位 置 ， 如 图 10-33 所 示 。 

执行 上 述 操 作 后 ， 按 Enter 键 确认 裁剪 操作 ， 即 可 按 固定 的 长 宽 比 来 裁剪 图 像 ， 
如 图 10-34 所 示 。 

打开 另 一 幅 素 材 图 像 ， 将 其 拖 蝶 至 当前 图 像 编辑 窗口 中 的 合适 位 置 ， 如 
图 10-35 所 示 。 
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图 10-32 调整 载 章 控制 框 的 长 宽 比 图 10-33 ”调整 裁剪 位 置 
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图 10-34 确认 裁 齐 操作 图 10-35 拖 忠 素材 图 像 至 当前 图 像 编辑 窗口 


10.2.2 切换 条 的 主体 效果 设计 VY 
下 面 主要 使 用 圆 角 秆 形 工具 、“ 描 了 边 ”图 层 样 式 、“ 内 阴影 ”图 层 样 式 、“ 渐 变 秋 加” 
图 层 样 式 、“ 投 影 ”图 层 样 式 等 制作 切换 条 的 主体 效果 。 
选择 工具 箱 中 的 圆 角 矩形 工具 , 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “ 形 


状 ”、“ 盾 充 ” 为 黑色 、“ 拉 边 ” 为 无 、“ 半 径 ” 为 8 像素， 执行 上 述 操 作 后 ， 绘 制 一 个 圆 
角 和 矩形 形状 ， 如 图 10-36 所 示 。 


设置 “ 圆 角 和 矩形 1” 图 层 的 “不 透明 度 ” 为 70%， 如 图 10-37 所 示 。 


DD ss 


有 


Photoshop™=— = Psp 


| 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


10-36 ”绘制 圆 角 和 矩形 形状 
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10-37 调整 图 层 的 不 透明 度 


双击 “ 圆 角 和 矩形 1” 图 层 , 在 弹出 的 “图 层 样 式 ” 对 话 框 中 , 勾 选 “ 描 边 ” 复 选 框 ， 
设置 “大 小 ”为 2 像素、“ 颜 色 ” 为 黑色 ， 如 图 10-38 所 示 。 

勾 选 “内 阴影 ” 复 选 框 ， 取 消 勾 选 “ 使 用 全 局 光 ” 复 选 框 ,设置 “混合 模式 ” 
为 “正常 ”、“ 阴 影 颜色 ”为 白色 、“ 不 透明 度 ”为 15%、“ 和 角度 ”为 90 度 、“ 距 离 ”为 5 
像素 、“ 阻 塞 ” 为 0、“ 大 小 ”为 0 像素 ， 如 图 10-39 所 示 。 

勾 选 “ 湖 变 登 加 ” 复 选 框 ， 并 设置 相应 的 参数 ， 如 图 10-40 所 示 。 

勾 选 “投影 ” 复 选 框 ， 并 设置 相应 的 参数 ， 如 图 10-41 所 示 。 
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10-38 设置 “ 描 边 ”图 层 样式 


图 10-40 设置 “渐变 亚 加 ”图 层 样 式 


图 标 、 图 形 、 按 钮 设计 


内 阴影 
结构 


混合 模式 (6B); 正常 ”| 

不 通明 度 (0); 一 一 固 % 
角度 (A): ( 上) 3 度 器 使 用 全 局 光 人 
中 训 ): ~ 5 像素 
阻 窒 (C): = 0 
大 小 (S) CPP 0 二 


品质 
sg 二 | Z| 门 沽 有 覃 具 () 
杂 色 了 了 0 % 


图 10-39 ”设置 “内 阴影 


混合 模式 (6): 正片 琶 语 ~ 加 加 
风度 ( |) 页 度 站 人 用 全 局 光 加 
大 小 (0 7 像素 


一 品质 
$i | -| Esinish 
条 四 和 全 |0 % 
ee . 
[设置 为 默认 值 ”| [ 复位 为 默认 值 | 


常用 元 素 : 


TV) 


图 层 样 式 


[ee 
园 ?(V) 


图 10-41 


设置 “投影 ”图 层 样 式 


于 当 07| 单 击 “确定 ”按钮 ， 即 可 为 “ 圆 角 和 矩形 ”图 层 添 加 相应 的 图 层 样式 ， 如 图 10-42 


所 示 。 


图 10-42 添加 图 层 样式 
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打开 反光 条 素材 图 像 ， 将 其 拖 虹 至 当前 图 像 编辑 窗口 中 的 合适 位 置 ， 如 图 10-43 


所 示 。 
sdcard0 (1/8) 
图 10-43 合成 素材 图 像 
10.2.3 切换 条 的 细节 效果 设计 W 


下 面 主要 使 用 自 定形 状 工 具 、“ 投 影 ” 图 层 样式 、 变 换 控 制 框 等 制作 切换 条 的 细节 效果 。 
设置 前 景色 为 白色 , 选择 工具 箱 中 的 自 定 形状 工具 , 设置 “形状 ” 为 “箭头 2”， 
绘制 一 个 第 头 形状 ， 如 图 10-44 所 示 。 


sdcard0 ( 1/8) 
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10-44 ”添加 自 定 义 形状 
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pg 对 当 02| 双击 “形状 1” 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 ， 勾 选 “投影 ” 复 选 框 ， 
设置 相应 的 参数 ， 如 图 10-45 所 示 。 


混合 模式 (6): 正常 | 
不 肖 了 朋 底 (0): 一 = % 
[AN 
角度 (): RD) -30 度 辐 使 用 全 局 光 (G) 


扩展 QR): CPP 0 % 
大 小 (5): CPP 0 像素 


预览 (V) 


一 品质 


等 高 线 : [A 口 潮 机 占 届 
杂 色 人 N): Ag 0 号 
复位 为 默认 值 


图 10-45 设置 图 层 样式 
p 受 5 二 03| 单 击 确定 按钮 , 即 可 为 “形状 1 图 层 添 加 投影 图 层 样式 , 如 图 10-46 所 示 。 


sdcard0 ( 1/8) 
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图 10-46 添加 “投影 ”图 层 样式 


pg 如 3 当 04| 复制 “形状 1” 图 层 ， 得 到 “形状 1 拷贝 ”图 层 ， 如 图 10-47 所 示 。 
2 弄 洒 05| 按 CtrltT 组合 键 , 调 出 变换 控制 框 ， 在 变换 控制 框 内 单 击 鼠标 右键 ， 在 弹出 
的 快捷 菜单 中 选择 “旋转 180 度 ” 命 令 ， 如 图 10-48 所 示 。 
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执行 上 述 操 作 后 ， 即 可 旋转 图 像 ， 如 图 10-49 所 示 。 
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图 10-49 ”旋转 图 像 效果 
按 Enter 键 确认 变换 操作 ， 并 调整 形状 至 合适 位 置 ， 如 图 10-50 所 示 。 
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图 10-50 ”确认 变换 并 调整 位 置 


打开 线条 素材 图 像 ， 将 其 拖 虹 至 当前 图 像 编 辑 窗 口中 的 合适 位 置 ， 并 适当 调整 
其 他 图 像 的 位 置 ， 最 终 效果 如 图 10-51 所 示 。 
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图 10-51 最 终 效果 


10.3 ”基础 元 素 : 掌握 移动 UI 搜索 框 的 设计 


APP 的 界面 是 由 多 个 不 同 的 基本 元 素 组 成 的 ,这 些 基本 元 素 通 过 外 形 的 组 合 、 色 彩 的 搭配 、 
材质 和 风格 的 统一 ， 以 及 合理 的 布局 ， 构 成 一 个 完整 的 UI 效 果 。 其 中 ， 功 能 框 是 最 币 用 的 
基本 元 素 。 导 航 和 通知 列表 可 以 通过 垂直 或 者 水 平 排列 的 方式 显示 多 行 条 目 ， 导 航 、 标 签 和 
列表 等 通 第 用 于 数据 、 信 息 的 展示 与 选择 。 

本 市 主 要 讲解 移动 UI 搜索 框 设 计 的 操作 方法 。 


10. 3. 1 内 容 10. 3. 2 内 容 10. 3.3 内 容 
请 扫 二 维 码 请 扫 二 维 码 请 扫 二 维 码 
10.3.1 _ 搜索 框 的 主体 效果 设计 | 


在 智能 手机 系统 的 主 界面 中 会 有 一 个 智能 搜索 框 插件 ， 用 户 可 以 通过 这 个 搜索 框 插件 进 
行 本 地 搜索 和 网 络 搜索 ， 如 网 络 音乐 、 视 频 、 地 图 及 商城 中 的 APP 等 各 种 资源 。 

下 面 主要 使 用 圆 角 和 矩形 工具 、“ 内 发 光 ” 图 层 样 式 、“ 投 影 ” 图 层 样 式 等 制作 搜索 框 的 
主体 效果 。 

选择 “文件 ” |“ 打开 ”命令 ， 打 开 一 幅 素 材 图 像 ， 如 图 10-52 所 示 。 

更 党 02| 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 1” 图 层 ， 如 图 10-53 所 示 。 
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图 10-53 ”新 建 图 层 


10-52 打开 素材 图 像 
pg 菇 当 03| 设置 前 景色 为 白色 ， 选 择 工 具 箱 中 的 圆 角 矩形 工具 ， 在 工具 属性 栏 中 设置 “ 选 
择 工 具 模 式 ” 为 “像素 ”、“ 半 径 ” 为 5 像素 ,绘制 一 个 圆 角 矩形， 如 图 10-54 所 示 。 
更 5 河 04| 双击 “图 层 1” 图 层 , 弹出 “图 层 样 式 ” 对 话 框 , 勾 选 “内 发 光 ” 复 选 框 , 设置 “不 
透明 度 ” 为 50%、“ 阻 塞 ”为 0、“ 大 小 ”为 4 像素 ， 如 图 10-55 所 示 。 


dE 
回 祯 点 (V) 


a 


| 设置 为 叶 认 值 | | 夏 位 为 财 认 值 ， 


图 10-54 绘制 圆 角 甜 形 图 10-55 设置 “内 发 光 ” 图 层 样 式 


在 使 用 圆 角 纶 形 工具 绘制 图 形 时 ,如果 按 住 Shi 人 ff 键 的 同时 , 单 击 鼠 标 左 键 并 进行 拖 锭 
可 绘制 一 个 正 圆 角 矩形 ; 如 果 按 住 Alt 键 的 同时 ， 单 击 鼠 标 左 键 并 进行 抱 撤 ， 可 绘制 以 起 


点 为 中 心 的 圆 角 和 矩 形 。 
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勾 选 “投影 ” 复 选 框 ， 设 置 “角度 ”为 120 度 ， 勾 选 “使 用 全 局 光 ” 复 选 框 ， 
设置 “距离 ”为 0 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 6 像素 ， 如 图 10-56 所 示 。 

单 击 “ 确 定 ” 按 钮 , 即 可 为 “图 层 1” 图 层 添加 图 层 样 式 , 设置 “图 层 1” 图 层 的 “不 
透明 度 ” 为 75%， 效果 如 图 10-57 所 示 。 
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图 10-56 设置 “投影 ”图 层 样 式 图 10-57 设置 不 透明 度 


10.3.2 搜索 框 搜索 图 标的 效果 设计 
下 面 主 要 使 用 自 定 形状 工具 、“ 投 影 ”图 层 样式 等 制作 搜索 图 标 效果 。 


简单 地 说 ， 图 层 可 以 被 看 作 是 一 张 独立 的 透明 胶片 ， 其 中 每 张 胶片 上 都 绘 有 图 像 ， 
将 所 有 的 胶片 按 图 层 ”面板 中 的 排列 次 序 自 上 而 下 进行 僵 加 ， 最 上 层 的 图 像 人 让 住 下 层 
同一 位 置 的 图 像 , 而 在 其 透明 区 域 则 可 以 看 到 下 层 的 图 像 , 最 终 通 过 登 加 得 到 完整 的 图 像 。 


“图 层 ” 面 板 是 进行 图 层 编 辑 操作 时 必 不 可 少 的 工具 。“ 图 层 ”面板 显示 了 当前 图 像 的 
图 层 信息 ， 从 中 可 以 调节 图 层 的 又 放 顺 序 、 图 层 的 透明 度 及 图 层 的 混合 模式 等 ， 几 乎 所 有 的 
图 层 操作 都 可 以 通过 它 来 实现 。 

在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 2” 图 层 ， 如 图 10-58 所 示 。 

多 缠 02] 选择 工具 箱 中 的 自 定形 状 工 具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “路 
径 ”， 在 “形状 ”下 拉 列 表 中 选择 “搜索 ”形状 ， 如 图 10-59 所 示 。 


站 214 


“和 和 


和 


ie) Rk: 
-HOO 


上 
人 


图 10-58 新 建 图 层 图 10-59 选择 自 定 形状 工具 


二 03| 按 住 Alt 键 的 同时 ， 在 圆 角 和 矩形 上 绘制 一 个 搜索 形状 路 径 ， 如 图 10-60 所 示 。 


步 又 按 Ctrl+Enter 组 合 键 ， 将 路 径 转 换 为 选区 ， 如 图 10-61 所 示 。 
专家 指点 ) 
在 自 定形 状 里 有 许多 的 分 类 ， 要 寻找 合适 的 素材 来 进行 创作 。 在 图 像 编辑 窗口 中 绘 


制 自 定 形状 时 ， 按 住 Shift 键 ， 单 击 息 标 左 键 进行 抱 入 ,就 能 绘制 出 正确 比例 的 形状 。 
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图 10-60 ”经 制 路 径 图 10-61 将 路 径 转 换 为 选区 


步骤 按 Altt+Delete 组 合 键 ， 填 充 选 区 为 白色 ， 如 图 10-62 所 示 。 
运河 06| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 10-63 所 示 。 
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图 10-62 填充 选区 图 10-63 ”取消 选区 
p 邓 5 当 07| 双击 “图 层 2” 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 色 选 “投影 ” 复 选 框 ， 
设置 “不 透明 度 ” 为 75%、“ 距 离 ”为 0 像素 、 “扩展 ”为 0、“ 大 小 ”为 3 像素 ， 如 
图 10-64 所 示 。 


这 河 08| 单 击 “确定 ”按钮 ， 即 可 为 “图 层 2” 图 层 添加 图 层 样式 ， 调 整 搜索 图 形 至 合 
适 位 置 ， 如 图 10-65 所 示 。 


| 混合 模式 (6)， 正 片 到 底 | 
不 透明 度 (D): 一 一 75 % 
角度 (A): wy 125 度 回 使 用 全 局 光 人 G) 
距离 |D): 0 像 圳 
扩展 (R): CT 0 % 
大 小 (S): Pv TE 3 像素 


团 图 层 挖 空 投影 (J) 
复位 Ri 认 什 


图 10-64 “投影 ”图 层 样式 图 10-65 调整 效果 


10.3.3 ”搜索 框 二 维 码 的 效果 设计 oD| 


下 面 主 要 使 用 “外 发 光 ” 图 层 样 式 、“ 投 影 ” 图 层 样 式 等 制作 二 维 码 图 标 效果 。 
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常用 元 素 : 
图 标 、 图 形 、 按 钮 设计 


0 OL 洲 


A 


打开 二 维 码 素材 图 像 ， 将 其 拖 电 至 当前 图 像 编辑 窗口 中 的 合适 位 置 ， 如 图 10-66 


所 示 。 
去 河 02| 双击 “图 层 3” 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 色 选 “外 发 光 ” 复 选 杠 ， 
设置 “扩展 ”为 0、“ 大 小 ”为 1 像素， 如 图 10-67 所 示 。 


本 | 站 疾 
”全 me Se 
20iegne 
design By Colin 3 
4” -. 
-一 
测 二 


责 位 为 认 什 


图 10-66 添加 二 维 码 素材 图 像 图 10-67 设置 “外 发光 ”图 层 样 多 


天河 03| 勾 选 “投影 ” 复 选 框 , 设置 “距离 ”为 0 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 3 像素 ， 
如 图 10-68 所 示 。 
二 04| 单 击 “ 确 定 ” 按 钮 , 即 可 为 “图 层 3” 图 层 添加 图 层 样式 ,最 终 效果 如 图 10-69 所 示 。 


al 
温 合 模式 (@)， 正片 大 订 


WV) ~ ~ I 
Oicons- 
design By Colin 
着 、 
-J 


| 
> 


图 10-68 设置 “投影 ”图 层 样式 10-69 ”最终 效果 


pA fg ee 


有 


学习 提示 


苹果 公司 的 移动 产品 ( 如 iPhone 系列 手机 、iPad 平板 电脑 、iPod 音乐 播放 
器 等 ) 如 今 已 风靡 全 球 ， 其 i0S 操作 系统 对 硬件 性 能 要 求 不 高 , 应 用 程序 丰富 ， 
操作 非常 流畅 ， 其 独特 的 魅力 吸引 了 越 来 越 多 的 用 户 。 本 章 主 要 介绍 苹果 系统 
UI 的 设计 方法 。 


本 章 重 点 导航 


e 设计 天 气 控 件 界 面 的 背景 效果 e 设计 日 历 APP 界面 的 背景 效果 
e 设计 天 气 控 件 界面 的 主体 效果 e 设计 日 历 APP 界面 的 主体 效果 


i ) 80? | 
~ 三 四 本 
北京 1 2“ 3 4 5 6 7 
ef ~ 
: 8 9 10 11 12 13 14 
”2016 年 3 月 5 日 Min 15 16 17 18 19 20 21 
今天 ! 
日 天 : 多 云 
ge 夜间; 晴 22 23 24 25 26 27 /28 


O12C. 。 
北 风 *4-5 级 


星期 六 猴 年 四 月 二 十 


18°C ~21°C 


Photoshop 罗 一 一 >>>>> 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


11.1 天 气 界面 : 掌握 天 气 控 件 界 面 的 设计 


在 人 苹果 智能 移动 设备 上 经 第 可 以 看 到 各 式 各 样 的 天 气 软件 ， 这 些 天 气 软 件 的 功能 都 很 全 
面 ， 除 了 可 以 随时 随地 查看 本 地 其 至 其 他 地 方 连 续 几 天 的 天 气 和 温度 ， 还 有 其 他 资讯 小 服务 ， 
是 移动 用 户 居 家 旅行 的 必需 工具 。 本 实例 最 终 效 果 如 图 11-1 所 示 。 


11.1.1 设计 天 气 控件 界面 的 背景 效果 JU 


下 面 主 要 使 用 “ 亮度/ 对比度 ”命令 、 曲线 命令 、 USM 锐 化 ”命令 及 图 层 混合 模式 等 ， 
设计 苹果 系统 天 气 控件 界面 的 背景 效 采 。 

选择 文件 | 打开 命令 , 打开 “苹果 系统 天 气 控件 背景 ”素材 图 像 ， 选择 “图 
像 | “调整”| “亮度 / 对比度” 命令 , 弹出 “亮度 / 对比度” 对 话 框 , 设置 “亮度 ”为 18、“ 对 
比 度 ” 为 31， 单 击 “ 确 定 ” 按 钮 ， 即 可 调整 背景 图 像 的 亮度 与 对 比 度 ， 效 果 如 图 11-2 所 示 。 

选择 “图 像 | 调整 | “曲线 ”命令 ,弹出 “曲线 ”对 话 框 ， 在 曲线 上 添加 
一 个 控制 点 ， 设 置 “ 输 出 ”和 “输入 ”的 参数 值 分 别 为 187、175， 然 后 在 曲线 上 添加 男 一 个 
控制 点 , 设置 “输出 ”和 “输入 ”的 参数 值 分 别 为 70、77, 如 图 11-3 所 示 , 单 击 “ 确 定 ” 按 钮 ， 
即 可 调整 背景 图 像 的 色调 。 
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苹果 系统 : 
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预 设 (R): 已 定 
通道 (C); RGB 


ts 


70 


区 OO 
输入 (1): 
区 77 Ap pl A 回 显 示 修身 (W) 


人 | 曲线 显示 选项 


显示 数量 : 回 光 (0-255\(L) 。 [ 喇 
) 世 MH/ 里 %(6) ”国力 
显示 : 团 通 道 各 加 (V) ” 团 基线 (8) 
加 直方 图 (H) 。 园 交叉 线 (N) 


图 11-2 使 用 “亮度 /对 比 度 ” 命 令 调 节 图 像 图 11-3 设置 “曲线 ”参数 值 


2 开 河 03| 选择 “ 滤 镜 "|“ 锐 化 ”| “USM 锐 化 ”命令 , 弹出 “USM 锐 化 ”对 话 框 , 设置 “ 数 
量 ” 为 30”%、“ 半 径 ” 为 3.6 像 素 、“ 国 值 为 19 色 阶 , 单 击 “ 确 定 ” 按 钮 ， 即 可 锐 化 背景 
图 像 ， 如 图 11-4 所 示 。 


上 次 污 简 捍 作 (有 Ctrl+F 
转换 为 智能 污 简 (9) 

抽 当 (X).. 

污 简 库 (G).… 

自 适 应 广角 (A).. Alt+Shift+Ctrl+A 
重头 校正 (R).. Shift+Ctrl+R 
液化 (LD)... Shift+Ctrl+X 
油画 (O)... 

图 案 生 成 鼎 (P)... 

涪 笑 点 (V)... Alt+Ctrl+V 


风格 化 
画笔 次 边 
模 梯 


上 

上 
扭曲 x 

> 

"| 。 防 拌 .. 
素 痊 上 ”进一步 锐 化 
纹理 ;| 锐 化 
像素 化 上 锐 化 边缘 
党 染 | 


智能 锐 化 .. 
图 11-4 锐 化 背景 图 像 


g 允 嘲 04| 展开 “图 层 ” 面 板 ， 按 CtrltJ 组 合 键 复制 “背景 ”图 层 ， 得 到 “图 层 1” 图 层 ， 
设置 “图 层 1” 图 层 的 “混合 模式 ”为 “又 加 ”、“ 不 和 透明度” 为 60%， 即 可 改变 图 像 效 果 ， 
如 图 11-5 所 示 。 


a 


有 
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和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


一 浏 05| 打开 “天 气 控件 界面 状态 栏 . psd” 素材 图 像 ， 将 其 拖 中 至 “苹果 系统 天 气 控件 
背景 ”图 像 编 辑 窗口 中 的 合适 位 置 处 ， 效 果 如 图 11-6 所 示 。 


图 11-5 调整 图 像 效 果 图 11-6 添加 状态 栏 素材 图 像 


11.1.2 设计 天 气 控件 界面 的 主体 效果 JW 


下 面 主 要 使 用 矩形 工具 、“ 投 影 ” 图 层 样 式 、 渐 变 工具 、 魔 棒 工具 、 横 排 文 字 工 具 等 ， 
设计 苹果 系统 天 气 控件 界面 的 主体 效果 。 

2 天河 01| 在 “图 层 ” 面 板 中 ， 新 建 “图 层 2” 图 层 ， 设 置 前 景色 为 浅 蓝 色 (RGB 参数 值 
为 121、140、239)， 如 图 11-7 所 示 。 


忠 吕 有 Web 颜色 


图 11-7 ”设置 前 景 
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S044 常见 苹果 系统 UI 设计 展 


pb 于 5 当 02| 选择 工具 箱 中 的 矩形 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 
绘制 一 个 矩形 。 双 击 “ 图 层 2” 图 层 ， 阐 出 “图 层 样 式 ” 对 话 框 ， 勾 选 “ 投 影 ” 复 选 框 ， 保 
持 默认 设置 即 可 ， 如 图 11-8 所 示 。 


一 投影 
一 结构 - 


混合 模式 (5) 正片 县 底 ~ 国 国 

不 透明 度 (0): 一 % 
角度 (A): ( | 】 8 度 团 使 用 全 局 (6) 
距离 D): 一 5 像素 
扩 民 (R): Ce 0 % 
大 小 CS) 2 5 像素 


品质 
等 高 线 : [A 加 
杂 色 (IN): 入 0 % 


团 图 层 控 空 投影 (J) 
L_ 设置 为 & 认 值 | | 复位 为 对 认 什 


图 11-8 勾 选 “投影 ” 复 选 杠 


加 汪 03| 单 击 “ 确 定 ” 按 钮 ， 应 用 “投影 ”图 层 样式 ， 效 果 如 图 11-9 所 示 。 
地 当 04 在 “图 层 ” 面 板 中 ,为 “图 层 2” 图 层 添加 图 层 蒙 版 ， 如 图 11-10 所 示 。 


图 层 

oTHA E 
[正常 “| 十 肖 明度 : [100%| - 
议定 : 四 /中 B@。 十 :ooxl 


© fx. 四 ©. 国 苗 .: 


图 11-9 应 用 “投影 ”图 层 样 式 效 果 图 11-10 ”添加 图 层 蒙 版 


2 05| 使 用 渐变 工具 ， 从 右 至 左 填 充 黑色 到 白色 的 线性 渐变 ， 效 果 如 图 11-11 所 示 。 
去 ;本 06| 在 “图 层 ” 面 板 中 设置 “图 层 2” 图 层 的 “不 透明 度 ” 为 60%， 如 图 11-12 所 示 。 


pp Wa 


有 


>>>>> 
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DD 大. 回 四 .外 加 人 辣 .: 


EL 


图 11-11 填充 线性 渐变 效果 图 11-12 设置 图 层 的 不 透明 度 
二 07| 复制 “图 层 2” 图 层 ， 得 到 “图 层 2 拷贝 ”图 层 ， 将 “图 层 2 拷贝 ”图 层 中 的 
图 像 拖 虹 至 相应 位 置 处 ， 效 果 如 图 11-13 所 示 。 
天河 08| 按 CtrlHT 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 按 Enter 键 
确认 操作 ， 如 图 11-14 所 示 。 


nn 
规 须 羡 于 


图 11-13 复制 并 移动 图 像 图 11-14 ” 苦 整 图 像 的 大 小 和 位 置 


下 09| 选择 工具 箱 中 的 魔 棒 工 具 ， 单 击 调整 后 的 图 像 ， 创 建 选区 ， 如 图 11-15 所 示 。 
一 河 10| 设置 前 景色 为 蓝 色 (RGB 参数 值 为 783、111、231)， 按 AlttDelete 组 合 键 ， 为 
选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 11-16 所 示 。 
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图 11-15 创建 选区 图 11-16 填充 效果 
在 “图 层 ” 面 板 中 , 复制 “图 层 2” 图 层 , 得 到 “图 层 2 拷贝 2” 图 层 , 适当 调整 “图 
层 2 拷贝 2” 图 层 中 图 像 的 大 小 和 位 置 ， 效 果 如 图 11-17 所 示 。 
选择 工具 箱 中 的 魔 棒 工 具 ， 单 击 调整 后 的 图 像 ， 创 建 选 区 ， 如 图 11-18 所 示 。 


图 11-17 调整 图 像 大 小 和 位 置 图 11-18 ”创建 选区 


-= 


好 强 13| 设置 前 景色 为 白色 , 按 AlttDelete 组 合 键 ,为 选区 填充 前 景色 , 按 Ctl+D 组 合 键 ， 
取消 选区 ， 效 有 果 如 图 11-19 所 未。 

设置 “图 层 2 拷贝 2” 图 层 的 “不 透明 度 ” 为 80%， 即 可 改变 图 像 效 果 ， 如 
图 11-20 所 示 。 


Pp 


| 屠 


Photoshop 反 于 一 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


psp 


一 类 型 pm -Ono 
[ER *] 通明 度 : |s0% | - | 


多 :四 4A 中 蛋 “ES9 
Be 


四 投影 


© EE 有 图 层 2 拷 贝 2 可 


虽 效果 
I 


11-19 ”填充 效果 


2 腕 河 15| 选择 “图 层 2 拷贝 2” 
如 图 11-21 所 示 。 


2 一 尖 16| 适当 调整 各 图 像 的 位 置 ， 效 果 如 图 11-22 所 示 。 


图 11-20 ”调整 图 层 的 不 透明 度 
图 层 ， 按 住 Ctrl+Alt 键 的 同时 向 下 拖 忠 ， 复 制 两 个 图 层 ， 


图 层 7 
iP 型 3| 国 昌 工 只 明 站 
| 正常 >| 不 透明 度 : |s0% | > | 
铁 许 : 田 A 中 B 填充:|100%| -| 


图 11-21 复制 图 层 


11-22 ”调整 图 像 的 位 置 


17| 打开 “天 气 图 标 1psd” 素 材 图 像 ， 将 其 拖 奥 至 “苹果 系统 天 气 控件 背景 ” 
emp 适 位 置 处 ， 效 果 如 图 11-23 所 示 。 


18] 打开 “天 气 图 标 2psd” 素 材 图 像 ， 将 其 拖 扰 至 “苹果 系统 天 气 控件 背景 ” 
家 编 各 窗 口中 并 适当 调整 各 图 像 的 位 置 ， 效 果 如 图 11-24 所 示 。 
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"| 


ml 


图 11-23 ” 拖 入 素材 图 像 图 11-24 拖 入 素材 图 像 


p 台 2 汪 19| 选择 工具 箱 中 的 横 排 文字 工具 , 确认 插入 点 , 在 “字符 ”面板 中 设置 “字体 系列 
为 “微软 雅 黑 ”、 字体 大 小 为 “60 点”、 颜色 ”为 白色 RGB 参数 值 均 为 255), 如 图 11-25 所 示 。 
这 浏 20| 使 用 横 排 文字 工具 在 图 像 中 输入 相应 文本 ， 如 图 11-26 所 示 。 


-一 
向 软 雅 黑 | -| |Reguar | | 
证 le 点 | -| 铬 | 人 自动 |- 


tT |100% | 工 |lloo% | 
0 点 新 名: 


I HU SH 和 二 
leo Saa lt 

| 半 国 英 语 jaa | 锐利 :| 
图 11-25 设置 文字 属性 图 11-26 输入 相应 文本 


2 磺 河 21| 使 用 横 排 文字 工具 确认 插入 点 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “微软 
雅 黑 ”、“ 字 体 大 小 ”为 “12 点 ”、“ 颜 色 ” 为 白色 (RGB 参数 值 均 为 255)， 如 图 11-27 所 示 。 


2 :sa 


ro a 


有 
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和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


2 碗 河 22| 在 图 像 中 输入 相应 文本 ， 完 成 苹果 系统 天 气 控件 界面 的 设计 ， 最 终 效果 如 图 11-28 
所 未。 


日 历 是 智能 手机 必 装 的 生活 类 APP， 是 用 户 生 活 中 的 好 帮手 ， 用 来 记录 生 话 、 设 置 提醒 ， 
帮助 自己 打 理 生活 的 方方面面 。 本 实例 最 终 效 果 如 图 11-29 所 示 。 


日 = 二 四 五 和 

] . 3 4 5 6 7 
劳动 节 青年 节 。 立夏 

9 10 11 12 13 14 

母亲 节 滩 佛 节 

15 16 17 18 19 21 


29 30 31 


多 今天 昌 期 六 猴 年 四 月 二 十 


OO 晴 18°C ~21°C 
© O06 


11-29 ”实例 戏 果 
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11. 2. 1 内 容 
请 扫 二 维 码 


请 扫 二 维 码 


11.2.1 设计 日 历 APP 界面 的 背景 效果 JU 


在 图 像 的 顶部 和 底部 分 别 绘制 矩形 ， 并 确定 界面 基准 颜色 。 下 面 介绍 苹果 手机 日 历 APP 
界面 背景 效果 的 制作 方法 。 

选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建 ”对 话 框 ， 设 置 “ 名 称 ” 为 “ 芋 果 系 
统 日 历 App 界面 ”、“ 宽 度 ”为 720 像素 、“ 高 度 ”为 1280 像素 、“ 分 辩 率 ”为 72 像素 / 英寸， 
如 图 11-30 所 示 ， 单 击 “确定 ”按钮 ， 新 建 一 幅 空白 图 像 。 

展开 “图 层 ” 面 板 ， 新 建 “图 层 1” 图 层 ， 如 图 11-31 所 示 。 

设置 前 景色 为 深 红色 (RGB 参数 值 为 195、46、41)， 选 择 工具 箱 中 的 矩形 工 
具 ， 设置 “选择 工具 模式 ”为 “像素 ”， 在 图 像 上 方 绘制 一 个 和 矩形， 并 填充 前 景色 ， 效 果 如 
图 11-32 所 示 。 

在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 2” 图 层 ， 选 择 工具 箱 中 的 矩形 选 框 工具 ， 创 
建 一 个 矩形 选区 ， 如 图 11-33 所 示 。 


名 称 (N): 苹果 系统 日 万 App 界 面 
一 | 预 识 (P): 自 定 
kh -| 
亮度 (wj: 720 。 聘 除 预 设 (D)..。 
高 度 (H): 攻坚 像素 

分 养 率 (RJ: 
颜色 模式 (MD 
背景 内 容 (C): 


全 高 级 


颜色 配置 文件 (0): 工作 中 的 RGB: sR6B 正 C6196.. > 
像素 长 宽 比 (X): 方形 像素 - 


11-30 ” “新建 ”对 话 框 图 11-31 新 建 “ 图 层 1” 图 层 
对 05| 选择 工具 箱 中 的 渐变 工具 ， 设 置 浅 灰色 (RGB 参数 值 均 为 247) 到 灰色 (RGB 参 
数值 均 为 218) 的 线性 渐变 ， 使 用 渐变 工具 从 上 至 下 为 选区 填充 线性 渐变 ， 按 Ctrl+D 组 合 键 
取消 选区 ， 如 图 11-34 所 示 。 
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在 “图 层 ” 面 板 中 ， 双 击 “ 图 层 2” 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 ， 
色 选 “ 描 边 ” 复 选 框 ， 设 置 “大 小 ”为 1 像素 、“ 颜 色 ” 为 灰色 (RGB 参数 值 均 为 203)， 如 
11-35 所 示 。 


创建 


图 11-32 ”经 制 答 形 并 填充 前 景 图 11-33 ”创建 和 矩 形 选 区 


图 11-34 填充 线性 渐变 图 11-35 设置 “ 描 边 ”图 层 样式 


型 河 07| 勾 选 “投影 ” 复 选 框 ， 设 置 “ 距 离 ” 为 1 像素 、“ 扩 展 ” 为 20%、“ 大 小 ”为 
10 像素 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样式 ， 效 果 如 图 11-36 所 示 。 


站 230 


“和 和 


二 08 选择 “文件 ”| “打开 ”命令 , 打开 “日 历 APP 状态 栏 psd” 素 材 图 像 ， 如 图 11-37 
所 示 。 


11-36 ”应 用 图 层 样式 效果 11-37 打开 状态 栏 素材 图 像 


使 用 移动 工具 将 其 拖 忠 至 “苹果 系统 日 历 APP 界面 ”图 像 编 辑 窗 口中 的 合适 
位 置 处 ， 如 图 11-38 所 示 。 


图 11-38 拖 入 状态 栏 素 材 图 像 
11.2.2 设计 日 历 APP 界面 的 主体 效果 OD 
在 制作 日 历 APP 界面 的 主体 效果 时 ,主要 使 用 了 和 矩形 选区 、 源 变 填充 、 图 层 样式 等 功能 ， 
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其 中 ， 为 图 像 添加 图 层 样 式 ， 可 以 使 界面 中 的 元 素 呈 现 出 立体 感 。 下 面 主要 介绍 苹果 系统 日 
历 APP 界面 主体 效果 的 制作 方法 。 

在 “图 层 ” 面 板 中 ， 新建“ 图 层 3” 图 层 ， 如 图 11-39 所 示 。 

选择 工具 箱 中 的 矩形 选 框 工具 ， 绘 制 一 个 矩形 选区 ， 如 图 11-40 所 示 。 


11-39 新建“ 图 层 3” 图 层 11-40 ”绘制 窍 形 选区 
如 03| 选择 工具 箱 中 的 渐变 工具 , 设置 红色 (RGB 参数 值 为 229、95、86) 到 深 红色 (RGB 
参数 值 为 186、70、55) 的 线性 渐变 ， 如 图 11-41 所 示 。 
未 ; 河 04| 使 用 渐变 工具 为 选区 从 上 至 下 填充 线性 渐变 ， 如 图 11-42 所 示 。 


名 称 (N): 。” 自 定 


三 ” ”渐变 类 型 [T): 实 底 
平滑 度 (M): 100 |% 


位 置 ; | % | 办 hf) | 
颜色 : 国人 (GO: EE % |[ 及 #(D) 


11-41 设置 线性 渐变 图 11-42 ”填充 线性 渐变 


2 开 河 05| 按 Ctrl+D 组 合 键 ,取消 选区 ， 效 有 果 如 图 11-43 所 示 。 
型 潭 06| 双击 “图 层 3” 图 层 , 弹出 “图 层 样式 ”对 话 框 , 勾 选 “ 描 边 ” 复 选 框 , 设置 “大 
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小 ”为 1 像素 、“ 颜 色 ” 为 白色 ， 如 图 11-44 所 示 。 


结构 


大 小 (S): CPP 像素 
位 置 p): 外 部 ~ 

混合 模式 6): 正常 ~> 

不 透明 度 (0): 一 DO 100 % 


填充 类 型 F): 颜色 v 
颜色 : 


复位 为 默认 值 


图 11-43 ”取消 选区 图 11-44 ”设置 “ 描 边 ” 图 层 样式 

天 07| 勾 选 “投影 ” 复 选 框 ， 设 置 “ 距 离 ” 为 1 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 10 
像素 ， 如 图 11-45 所 示 。 

吉 河 08| 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样式 ， 效 果 如 图 11-46 所 示 。 


复位 为 默认 值 


图 11-45 设置 “投影 ”图 层 样 式 图 11-46 应 用 图 层 样 式 效果 


证 湖 09| 选择 工具 箱 中 的 圆 角 矩形 工具 ， 设 置 “ 选 择 工 具 模式 ”为 “路 径 ”、“ 半 径 ” 
为 8 像素， 绘制 一 个 圆 角 和 矩形 路 人 径 ， 如 图 11-47 所 示 。 
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南河 10| 按 Ctrl+Enter 组 合 键 ， 将 路 径 转换 为 选区 ， 如 图 11-48 所 示 。 


图 11-47 绘制 圆 角 和 矩 形 路 径 11-48 ”将 路 径 转 换 为 选区 


在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 4” 图 层 ， 如 图 11-49 所 示 。 

选择 工具 箱 中 的 渐变 工具 ， 为 选区 填充 红色 (RGB 参数 值 为 229、95、86) 到 
深 红色 (RGB 参数 值 为 186、70、55) 的 线性 渐变 ， 如 图 11-50 所 示 。 

按 Ctrl+D 组 合 键 ， 取 消 选区 ， 效 果 如 图 11-51 所 示 。 

双击 “图 层 4” 图 层 ， 在 弹出 的 “图 层 样 式 ”对 话 框 中 多 选 “ 描 边 ” 复 选 框 ， 
设置 “大 小 ”为 1 像素 、“ 颜 色 ” 为 深 红色 (RGB 参数 值 为 168、30、32)， 如 图 11-52 所 示 。 


11-49 新建 “图 层 4” 图 层 图 11-50 填充 线性 渐变 
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雪 4L 测 


结构 
大 小 (S): CC 像 束 
位 置 (P); 外 部 新 建 样式 |( 
混合 模式 (6): 正常 ~ 图 预览 (V) 


”填充 类 型 (F): 颜色 ~ 
颜色 : 国生 


设置 为 Bi 认 值 | 复位 为 默认 值 


图 11-51 取消 选区 图 11-52 设置 “ 描 边 ”图 层 样 式 

下 15| 勾 选 “内 阴影 ” 复 选 框 ， 设置 “混合 模式 ”为 “正常 ”、“ 阴 影 颜色 ”为 浅 红 
色 (RGB 参数 值 为 223、178、178)、“ 距 离 ” 为 1 像素 、“ 阻 塞 ”为 5%、“ 大 小 ”为 18 像素 ， 
如 图 11-53 所 示 。 

元 河 16| 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样 式 ， 效 果 如 图 11-54 所 示 。 

过 河 17| 打开 “按钮 组 .psd” 素 材 图 像 ， 将 其 拖 蝶 至 “ 芋 果 系统 日 历 APP 界面 ”图 像 
编辑 窗口 中 ， 并 调整 至 合适 位 置 ， 如 图 11-55 所 示 。 

过 河 18| 打开 “日 历 表 .psd” 素 材 图 像 ， 将 其 拖 昌 至 “ 芋 果 系统 日 历 APP 界面 ”图 像 
编辑 窗口 中 ， 并 调整 至 合适 位 置 ， 效 果 如 图 11-56 所 示 。 


设 兰 为 默认 值 复位 为 &ii 值 


图 11-53 设置 “内 阴影 ”图 层 样式 11-54 ”应 用 图 层 样式 效果 
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图 11-55 ” 拖 入 按钮 组 素材 图 像 图 11-56 拖 入 日 历 表 素 材 图 像 


2 天河 19 选择 “视图 ”|“ 标 尺 ” 命 令 ， 即 可 显示 标尺 ， 如 图 11-57 所 示 。 
天 河 20| 从 水 平 标尺 上 拖 虹 出 1 条 水 平 参考 线 ， 放 置 于 垂直 标尺 的 36cm 位 置 处 ， 如 
]1->8 所 示 。 


FAPPRN ON AE NWR | 一 |OL x 


图 11-57 ”显示 标尺 图 11-58 ”创建 参考 线 
下 21| 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 5” 图 层 ， 如 图 11-59 所 示 。 
一 河 22| 设置 前 景色 为 灰色 (RGB 参数 值 均 为 141)， 如 图 11-60 所 示 。 
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口 只 有 Web 颜色 


11-59 新建 “图 层 5” 图 层 11-60 ”设置 前 景 


pg 弛 23 选择 工具 箱 中 的 单行 选 框 工 具 , 在 参考 线 位 置 上 创建 单行 选区 ,如 图 11-61 所 示 。 
步骤 二 Alt+Delete 组 合 键 ， 为 选区 填充 前 景色 ， 如 图 11-62 所 示 。 


图 11-61 创建 单行 选区 11-62 填充 前 景 


按 CtrltD 组 合 键 ， 取 消 选 区 ， 如 图 11-63 所 示 。 

选择 “视图 ”|“ 清 除 参 考 线 ”命令 ， 清 除 参考 线 ， 如 图 11-64 所 示 。 
在 “图 层 ”面板 中 ， 新 建 “图 层 6” 图 层 ， 如 图 11-65 所 示 。 
好强 28| 设置 前 景色 为 红色 (RGB 参数 值 为 195、46、41)， 如 图 11-66 所 示 。 
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图 11-63 ”取消 选区 图 11-64 ”清除 参考 线 


门 只 有 Web 颜色 


图 11-66 设置 前 景 
选择 工具 箱 中 的 椭圆 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 
在 图 像 下 方 绘制 一 个 正 圆 形 ， 效 果 如 图 11-67 所 示 。 
双击 “图 层 6” 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 色 选 “外 发 光 ” 复 选 框 ， 
设置 “扩展 ”为 10%、“ 大 小 ”为 50 像素 ， 如 图 11-68 所 示 。 
单 击 “确定 ” 按 钮 ， 应 用 “外 发 光 ” 图 层 样式 ， 效 果 如 图 11-69 所 示 。 
复制 “图 层 6” 图 层 ， 得 到 “图 层 6 拷贝 ”图 层 ， 如 图 11-70 所 示 。 
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绘制 请 


i- 


@@ 损 边 - 
9 .加 OO. 语 同人 辣 4 


11-69 ”应 用 “外 发 光 ” 图 层 样式 效果 图 11-70 复制 图 层 


使 用 移动 工具 适当 调整 “图 层 6 找 贝 ” 图 层 中 的 图 像 位 置 , 效果 如 图 11-71 所 示 。 

使 用 与 上 述 同 样 的 方法 ， 再 复制 两 个 正 圆 形 ， 并 适当 调整 其 位 置 ， 效 果 如 图 11-72 
所 示 。 

选择 工具 箱 中 的 横 排 文字 工具 ， 确 认 插 入 点 ， 在 “字符 ”面板 中 设置 “字体 系 
列 ” 为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “45 点 ”、“ 字 距 调整 ”为 100、“ 颜 色 ” 为 白色 (RGB 
参数 值 均 为 255)， 如 图 11-73 所 示 。 

在 图 像 标题 栏 中 输入 相应 文本 ， 如 图 11-74 所 示 。 
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[EE。_:| 7 [100%| -| 
广 定 : 团 中 日 十 :lx -| 


图 11-71 调整 图 像 的 位 置 


lo | 


图 尽 
[ 玻 :| 明度:[b00%] -| 
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图 11-73 设置 文字 属性 


中 所 加 中. 四 上 加 会 


图 11-74 输入 相应 文本 

天 河 37| 双击 文本 图 层 , 在 弹出 的 “图 层 样式 ”对 话 框 中 色 选 “投影 ” 复 选 框 ,设置 “ 距 
离 ” 为 1 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 1 像素 ， 如 图 11-75 所 示 。 

二 38| 单 击 “确定 ”按钮 ， 为 文本 添加 “投影 ”图 层 样 式 ， 效 果 如 图 11-76 所 示 。 
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11-75 设置 “投影 ”图 层 样式 图 11-76 应 用 图 层 样式 效果 


2 邢 河 39| 打开 “日 历 APP 文字 .psd” 素 材 图 像 ， 将 其 拖 蝶 至 “苹果 系统 日 历 APP 界面 
的 图 像 编 辑 窗口 中 ， 并 调整 至 合适 位 置 ， 最 终 效 果 如 图 11-77 所 示 。 


| 十 本 = ad 小 满 3 
22 23 24 25 26 27 (2) 
~" = = “in 讨 全 二 
29 30 31 


多 今天 星期 六 猴 年 四 月 二 十 


办 上 是 1sc-21x 


O006 


11-77 ”最终 效果 
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学 习 提 示 


“ 安 旱 ”一 词 的 本 义 指 “ 机 器 人 ”， 同 时 也 是 一 个 基于 Linux 平台 的 开源 
手机 操作 系统 的 名 称 。 该 平台 由 操作 系统 、 中 间 件 、 用 户 界 面 和 应 用 软件 组 成 ， 
是 首 个 为 移动 终端 打造 的 真正 移动 开放 性 的 平台 。 本 章 主要 介绍 安 卓 系统 UI 的 
设计 方法 。 


本 章 重 点 导航 


@ 设计 安 早 系统 锁 屏 界面 的 背景 
效果 

@ 设计 安 早 系统 锁 屏 界面 的 主体 
效果 


© 安 卓 应 用 程序 界面 的 主体 效果 
设计 

© 安 卓 应 用 程序 界面 的 整体 效果 
设计 


Photoshop 芝 一 >>> 
四 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 
12.1 锁 屏 界面 : 全 握 安 早 系统 个 性 锁 屏 界面 的 设计 
安 卓 系统 用 户 可 以 设置 不 同 的 个 性 化 的 锁 屏 界面 。 应 用 锁 屏 功能 不 仅 可 以 避免 一 些 不 必 


要 的 误 操 作 ， 还 能 方便 用 户 的 桌面 操作 ， 美 化 桌面 环境 ， 不 同 的 锁 屏 界面 可 以 给 用 户 带 来 不 
同 的 心情 。 本 实例 最 终 效 果 如 图 12-1 所 示 。 


I 


2016 年 2 月 29 日 
年 期 一 


图 12-1 实例 戏 果 


12. 1.2 内 容 
请 扫 二 维 码 


12.1.1 设计 安 卓 系 统 锁 屏 界面 的 背景 效果 JU 


下 面 主 要 使 用 裁剪 工具 、“ 亮 度 / 对比度 ”调整 图 层 、“ 自 然 饱 和 度 ” 调 整 图 层 及 图 层 
混合 模式 等 ， 设 计 安 卓 系 统 个 性 锁 屏 界面 的 背景 效果 。 


设计 安定 系统 锁 屏 背景 需要 注意 以 下 几 点 。 
(1) 需要 确定 一 个 设计 主题 。 

(2) 背景 素材 的 取材 要 贴 合 设计 主题 。 

(3) 注意 界面 交互 的 应 用 。 
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选择 “文件 ”|“ 打 开 ” 命 令 ， 打开 “ 锁 屏 背景 Jpg” 素 材 图 像 ， 如 图 12-2 所 示 。 
选择 工具 箱 中 的 裁剪 工具 ， 如 图 12-3 所 示 。 


图 12-2 打开 素材 图 像 图 12-3 ”选择 裁剪 工具 


天 河 03| 执行 上 述 操作 后 ， 即 可 调 出 裁剪 控制 框 ， 如 图 12-4 所 示 。 
在 工具 属性 栏 中 设置 裁剪 控制 框 的 长 宽 比 为 1000 : 750， 如 图 12-5 所 示 。 


PS 文件 (” 编 轧 (日 ”图 像 四 ”图 层 (L) 类 型 (Y) 选择 ($) 


图 12-4 ” 调 出 裁剪 控制 框 图 12-5 设置 裁 瘟 控制 框 的 长 宽 比 

执行 上 述 操作 后 ， 即 可 调整 裁剪 控制 框 的 长 宽 比 ， 将 鼠标 指针 移 至 裁剪 控制 杠 
内 ， 按 住 鼠 标 左 键 拖 电 图 像 至 合适 位 置 ， 如 图 12-6 所 示 。 

执行 上 述 操作 后 ， 按 Enter 键 确认 裁剪 操作 ， 即 可 按 固定 的 长 宽 比 来 裁剪 图 像 ， 
效果 如 图 12-7 所 示 。 

选择 “图 层 ”|“ 新 建 调整 图 层 ”|“ 亮 度 / 对比 度 ” 命 令 ， 如 图 12-8 所 示 。 

弹出 “新 建 图 层 ” 对 话 框 ， 保 持 默认 设置 ， 如 图 12-9 所 示 。 

单 击 “确定 ”按钮 ， 即 可 新 建 “亮度 /对比度 1” 调 整 图 层 ， 如 图 12-10 所 示 。 

展开 “属性 ”面板 ， 设 置 “亮度 ”为 18、“ 对 比 度 ” 为 30， 如 图 12-11 所 示 。 
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吝 于 


12-6 贡 整 裁剪 位 置 12-7” 裁 筋 图 像 


类 型 (Y) 选择 (9 小 筑 中 ”3D(D) ”视图 (V) 音 D(W) 


复制 CSS | 2 
复制 图 层 (D)..… 
二 
重 命名 图 层 . 
图 层 样式 (V) 
智能 洲 策 
新 建 填 充 图 层 (W) 
新 建 调整 图 层 ( 
图 层 内 容 选项 (0).- 
图 层 蒙 版 (M) 
矢量 莹 版 (V) 
创建 英 贴 蒙 版 (O Ak+Ctrl+G 自然 饱和 度 (R)..… 

"| 他 相 / 刻 和 度 (H)~ 名 称 (N): ET 丰 
= 一 二 、 色彩 平衡 (B).- 
视频 图 层 ,| 黑 和 (0. 器] 使 用 前 一 图 层 创 建 前 贴 蒙 版 (P) 
人 照片 湾 演 ()- 颜色 (C): [x 无 - 
新 建 共 于 图 层 的 切片 (B) 通道 漫 合 器 (X).. 

模式 (M): 正常 ~ ”不 透明 度 (0): | 10o 加 % 

图 层 编组 (G6) Ctrl+G | ”基色 查找 … 
12-8 ”选择 “亮度 / 对比度” 命令 12-9 “新 建 图 层 ” 对 话 框 


12-10 ”新建 “亮度 /对比度 1” 调整 图 层 12-11 设置 “亮度 ” “对 比 度 ” 参 数 
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这 党 11| 执行 上 述 操 作 后 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 效 果 如 图 12-12 所 示 。 
2 碗 潭 12| 新 建 “ 自 然 饱和 度 1” 调 整 图 层 ， 展 开 “ 属 性 ”面板 ， 设置 “自然 饱和 度 ” 为 
50、“ 钨 和 度 ” 为 28， 如 图 12-13 所 示 。 


图 12-12 ” 贡 整 图 像 的 亮度 和 对 比 度 12-13 设置 相应 参数 


p 女 3 当 13| 执行 上 述 操作 后 ， 即 可 调整 图 像 的 色彩 饱和 度 ， 效 果 如 图 12-14 所 示 。 
2 古河 14| 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 如 图 12-15 所 示 。 


着 
. 
wear 

| 

| EE Le Po 

4 [ 人] 1 二 二 
天 “uy 
es 

Es 


引 | 自然 季度 1 


oD .加 .和 甸 命 


图 12-14 ”调整 图 像 的 色彩 饱和 度 图 12-15” 新建“ 图 层 1” 图 层 


运河 15 设置 前 景色 为 深蓝 色 (RGB 参数 值 为 1、23、51)， 如 图 12-16 所 示 。 
大河 16| 按 AlttDelete 组 合 键 ， 填 充 前 景色 ， 如 图 12-17 所 示 。 
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更 河 17| 设置 “图 层 1” 图 层 的 “混合 模式 ”为 “ 减 去 ”、“ 不 透明 度 ” 为 60%， 
如 图 12-18 所 示 。 


2 开 : 湖 18| 执行 上 述 操作 后 ， 即 可 改变 图 像 效 采 ， 如 图 12-19 所 示 。 


中 只 有 Web 颜色 


12-17 ”填充 前 景 


|[[ 酶 “和 禄 天 :oow | -] 
:四 中公 需 
-as: 


@ 本 8| | 自然 中 和 度 : 


@ 河 8| | 误 度 岂 比 谨 1 


。 转产 a 


图 12-18 设置 图 层 属性 图 12-19 ”图像 效果 
12.1.2 设计 安 卓 系统 锁 屏 界面 的 主体 效果 | 
下 面 主 要 使 用 椭圆 选 框 工具 、“ 描 边 ” 命 令 、“ 外 发 光 ”图 层 样 式 等 ， 设 计 安 卓 系统 个 
性 锁 屏 界面 的 主体 效果 。 


2 天河 01| 在 “图 层 ” 面 板 中 ， 创 建 “ 图 层 2” 图 层 ， 如 图 12-20 所 示 。 
二 司 02| 选择 工具 箱 中 的 椭圆 选 框 工具 ， 创 建 一 个 椭圆 选区 ， 如 图 12-21 所 示 。 
过 可 03| 选择 “编辑 ”|“ 描 边 ” 命 令 ， 弹 出 “ 描 边 ”对 话 框 ， 设 置 “宽度 ”为 2 像素 、 


we 
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“颜色 ”为 白色 ， 如 图 12-22 所 示 。 
二 河 04| 单 击 “确定 ”按钮 ， 即 可 描 边 选区 ， 如 图 12-23 所 示 。 


DH fx 四 人 .和 外 命 


图 12-20 新建 “图 层 2” 图 层 图 12-21 创建 椭圆 选区 


一 损 边 
宽度 (W): 四 5E 引 


一 世 生 


| 〇 内 部 (了 回 居 中 (OO 局 居 》MU) 
一 混合 
模式 (M): 正常 
不 透明 度 (0): 100  % 
加 | 保留 透明 区 域 (P) 


图 12-22 “ 描 边 ” 对 话 框 12-23 ” 描 边 选区 


2 观 ; 河 05| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 12-24 所 示 。 
a 观 呈 06 双击 “图 层 2” 图 层 , 弹出 “图 层 样式 ”对 话 框 , 勾 选 “外 发 光 ” 复 选 框 , 设置 “发 
光 颜 色 ” 为 白色 、“ 大 小 ”为 10 像素 ， 如 图 12-25 所 示 。 
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外 发 光 


混合 模式 人 E): 滤 色 
不 通明 度 (O: yg 5 


S| "| Catsist 
拌 翅 0 Sr 0 和 % 


设置 为 默认 值 | | 复位 为 默认 值 | 


单 击 “ 确 定 ” 按 钮 ， 应 用 “外 发 光 ” 图 层 样 式 ， 效 果 如 图 12-26 所 示 。 
打开 “ 锁 图 标 .psd” 素 材 图 像 ， 将 其 拖 暇 至 “ 锁 屏 背景 ”图 像 编 辑 窗 口中 的 合 
适 位 置 处 ， 如 图 12-27 所 示 。 


“ql 四 Pu 
是 


双击 “ 锁 图 标 ” 图 层 ， 阐 出 “图 层 样式 ”对 话 框 ， 勾 选 “ 外 发 光复 选 框 ， 设 
置 “大 小 为 10 像素， 如 图 12-28 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 应 用 “外 发 光 ” 图 层 样 式 ， 效 果 如 图 12-29 所 示 。 

打开 “ 锁 屏 界面 状态 栏 . psd” 素材 图 像 ， 将 其 拖 暇 至 “ 锁 屏 背景 ”图 像 编 辑 窗 
口中 的 合适 位 置 处 ， 如 图 12-30 所 示 。 

打开 “时 间 .psd ”素材 图 像 ， 将 其 拖 扎 至 “ 锁 屏 背景 ”图 像 编辑 窗口 中 的 合适 
位 置 处 ， 最 终 效 采 如 图 12-31 所 示 。 
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如 所 
6 | A 口 海 4 此 (0) 
范围 ): yy % 
把 0: Cr 0% 


在 手机 主 界面 中 单 击 “应 用 程序 ”按钮 ， 用 户 即 可 进入 应 用 程序 界面 ， 这 里 显示 了 手机 
所 安装 的 全 部 程序 ， 以 方便 用 户 查找 ， 用 户 可 以 在 这 个 界面 中 选择 需要 的 程序 直接 运行 。 本 
市 主 要 癌 读 者 介绍 设计 安 捍 应 用 程序 界面 的 操作 方法 。 

本 实例 最 终 效 采 如 图 12-32 所 示 。 
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12.2. 1 内 容 
请 扫 二 维 码 


12. 2.2 内 容 
请 扫 二 维 码 


12.2.1 安 捍 应 用 程序 界面 的 主体 效果 设计 JU 


下 面 主要 介绍 安 卓 系统 应 用 程序 界面 主体 效果 的 制作 方法 。 

选择 “文件 ”| “新建 ” 命 令 ， 弹 出 “新 建 ” 对 话 框 ， 设 置 “ 名 称 ” 为 “安里 系 
统 应 用 程序 界面 ”、“ 宽 度 ” 为 1181 像素 、“ 高 度 ” 为 1890 像素 、“ 分 辨 率 ” 为 72 像素/ 英 
寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 如 图 12-33 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 新 建 一 个 空白 图 像 文件 ， 如 图 12-34 所 示 。 

选择 “文件 ”| “打开 ”命令 ， 打 开 手 机 屏保 素材 图 像 ， 如 图 12-35 所 示 。 

选择 工具 箱 中 的 移动 工具 ， 把 素材 图 像 拖 上 息 至 “ 安 章 系统 应 用 程序 界面 ”图 像 
编辑 窗口 中 的 合适 位 置 ， 效 果 如 图 12-36 所 示 。 

打开 “应 用 程序 界面 状态 栏 .psd” 素 材 图 像 ， 将 其 拖 中 至 “ 安 卓 系统 应 用 程序 
界面 ”图 像 编辑 窗口 中 的 合适 位 置 处 ， 如 图 12-37 所 示 。 

展开 “图 层 ” 面 板 ， 新 建 “ 图 层 2” 图 层 ， 如 图 12-38 所 示 。 


wx 
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安 卓 系统 .| 苞 
CLL 常见 安 卓 系统 UI 设计 上 


安 章 系统 应 用 程序 界面 @ 25%(RGB/8) x 


名 称 (N): 安 卓 系统 应 用 程序 界面 
预 设 (P): 自 定 


宽度 (W): 
高 度 (H): 
分 辨 检 (R): 


颜色 模式 (M): 
背景 内 容 (O): 


RN 


人 | 高 级 


颜色 配置 文件 (0): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 方形 像素 


12-33 ” “新建” 对 话 框 图 12-34 新建 空白 图 像 


€ 1 EXE IEEE -sl FT 


| 


文件 名 (N); 手机 屏 侠 JPG 


回 © TO 电 
正常 | 入 委 明度 : [100%| -， 
证: 田中 有 十 8:[100%]-] 


DO 灰 . 回 四. 外 加 便 
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12-37 拖 入 状态 栏 素 材 图 像 图 12-38 ”新建 “图 层 2” 图 层 
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南河 07| 选择 工具 箱 中 的 和 矩形 选 框 工具 ， 创 建 一 个 矩形 选区 ， 如 图 12-39 所 示 。 
去 ;党 08| 选择 工具 箱 中 的 渐变 工具 ， 设 置 灰色 (RGB 参数 值 为 84、82、82) 到 黑色 (RGB 
参数 值 均 为 0) 再 到 黑色 (RGB 参数 值 均 为 0) 的 线性 渐变 ， 如 图 12-40 所 示 。 


名 称 (N): 自 定 


渐变 类 型 (T): 实 底 
平滑 度 (M): 100 | % 


性 除 (D， 


拔 色 : 国人 村 (0: % 用 除 (D) | 


图 12-39 ”创建 矩 形 选 区 图 12-40 ”设置 线性 渐变 

下 09| 使 用 渐变 工具 为 选区 填充 线性 渐变 ， 效 果 如 图 12-41 所 示 。 

天河 10| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 12-42 所 示 。 

天 11 | 双击 “图 层 2” 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 色 选 “ 描 边 ” 复 选 框 ， 
设置 “大 小 ”为 3 像素 、“ 颜 色 ” 为 灰色 (RGB 参数 值 为 130、126、126)， 如 图 12-43 所 示 。 


em 12| 勾 选 “投影 ” 复 选 框 , 设置 “距离 ”为 5 像素 、 “扩展 ”为 0、“ 大 小 ”为 8 像素 ， 
如 图 12-44 所 示 。 


12-41 填充 线性 渐变 图 12-42 取消 选区 
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aa4: 常见 安 卓 系统 UI 设计 肛 


混合 模式 @)， 正片 亚 底 | 
不 选 明度 (0); = 75 % 


角度 (A): ( 、 】120 ” 度 园 使 用 全 局 光 (G) 


不 通明 度 (0): 一 DO 100  %% 


填充 类 型 F): 颜色 ~ 
ie: 属国 


设置 为 默认 值 | | 复位 为 默认 值 | 


Ed (Uy) 
_ 设 秆 为 & 认 值 | | 复位 为 喷 认 信 | 


图 12-43 ”设置 “ 摘 边 ”图 层 样 式 


二 13| 单 击 “确定 ”按钮 ， 即 可 应 用 图 层 样 式 ， 效 果 如 图 12-45 所 示 。 
加 14| 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 3” 图 层 ， 如 图 12-46 所 示 。 


ll 


到 号 

OOTZm 日 
EE 党 。。。。。] 不 明度 : [i100%] 
谈 定 : 图 sf 中 B ”填充 : [100%|- 


@ 效果 
人 @ 指 边 
四 投影 

WE- - 


吕 友 回 O 白 司 舍 


图 12-45 应 用 图 层 样式 效果 图 12-46 新 建 “ 图 层 3” 图 层 


选择 工具 箱 中 的 矩形 选 框 工具 ， 创 建 一 个 矩形 选区 ， 如 图 12-47 所 示 。 

选择 工具 箱 中 的 渐变 工具 ， 设 置 灰色 (RGB 参数 值 均 为 130) 到 深 灰 色 (RGB 参 
数值 为 89、87、87) 再 到 灰色 (RGB 参数 值 均 为 124) 的 线性 渐变 ， 如 图 12-48 所 示 。 

使 用 渐变 工具 为 选区 填充 线性 渐变 ， 效 果 如 图 12-49 所 示 。 

按 Ctrl+D 组 合 键 ， 取 消 选区 ， 效 果 如 图 12-50 所 示 。 

双击 “图 层 3” 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 色 选 “ 描 边 ” 复 选 框 ， 
设置 “大 小 ”为 3 像素 、“ 颜 色 ” 为 白色 ， 如 图 12-51 所 示 。 

在 “图 层 样 式 ” 对 话 框 中 勾 选 “内 发 光 ” 复 选 框 ， 设置 “阻塞 ”为 0、“ 大 小 ” 
为 1 像素 ， 如 图 12-52 所 示 。 


a 
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单 击 “ 确 定 ” 按 钮 ， 应 用 图 层 样式 ， 效 果 如 图 12-53 所 示 。 
打开 “应 用 程序 图 标 .psd” 素 材 图 像 ， 将 其 拖 归 至 “ 安 时 系统 应 用 程序 界面 ” 
图 像 编辑 窗口 中 ， 并 调整 至 合适 位 置 ， 如 图 12-54 所 示 。 


名 称 (N): 自 定 


渐变 类 型 (T): 实 底 ~ 设置 
平滑 度 (M): 100 *|% 


疡 色 : 国 时 关 》 。 位 置 (C): % [用 (D) 


Ba 全 | 


” 
3 


12-49 ”填充 线性 渐变 图 12-50 ”取消 选区 


i 0 


“和 和 


大 小 (5): G 

位 置 P); 外 部 
混合 模式 人 ); 正常 
不 透明 度 (D): 


培 充 类 型 F): 颜色 ~ 
| 


设置 为 默认 值 | | 复位 为 默认 值 | 


图 12-53 ”应 用 图 层 样式 效果 图 12-54” 拖 入 图 标 素材 图 像 
12.2.2 安 捍 应 用 程序 界面 的 整体 效果 设计 OD 


本 实例 首先 加 入 图 标 素 材 图 像 ， 然 后 制作 应 用 程序 的 界面 标记 符号 ， 最 后 输入 相应 的 文 
字 ， 完 成 安 齐 应 用 程序 界面 设计 的 整体 效果 。 下 面 主要 介绍 安 齐 系统 应 用 程序 界面 整体 效果 
设计 的 制作 方法 。 

打开 “系统 图 标 .psd” 素 材 图 像 ， 将 其 拖 息 至 “ 安 时 系统 应 用 程序 田 面 ”图 像 
编辑 窗口 中 ， 调 整 至 合适 位 置 ， 如 图 12-55 所 示 。 

展开 “图 层 面板， 新 建 “ 图 层 4 图 层 ， 如 图 12-56 所 示 。 
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多 内 总 沪 
3 fx. 四 所 .外 曾 


图 12-55 拖 入 图 标 素材 12-56 新建 “图 层 4” 图 层 


加 当 03| 选择 工具 箱 中 的 椭圆 工具 ， 如 图 12-57 所 示 。 
pg 于 04 | 设置 前 景色 为 深蓝 色 (RGB 参数 值 为 20、143、193)， 如 图 12-58 所 示 。 


应 自 定形 尖 T 具 


日 [ 国 5 p 驻 团 7 台 | 


器 只 有 Web 颜色 


12-57 ”选择 椭圆 工具 12-58 设置 前 景色 


在 图 像 编辑 窗口 中 绘制 一 个 椭圆 形 ， 如 图 12-59 所 示 。 

双击 “图 层 4” 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 多 选 “ 内 阴影 ” 复 选 框 ， 
设置 “距离 ”为 0 像素 、“ 阻 塞 ” 为 18%、“ 大 小 ”为 9 像素， 如 图 12-60 所 示 。 

勾 选 “外 发 光 ” 复 选 框 ， 设 置 “发 光 颜 色 ” 为 深蓝 色 (RGB 参数 值 为 0、92、 
177)、“ 扩 展 ” 为 0、“ 大 小 ”为 9 像素 ， 如 图 12-61 所 示 。 

勾 选 “投影 ” 复 选 框 , 设置 “距离 ”为 0 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 6 像素 ， 
如 图 12-62 所 示 。 
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混合 模式 EG): 正片 县 底 


不 透明 度 (O): Zs % 
角度 (A): (~ 1 120 ” 度 园 使 用 全 局 光 (G) 


距离 [D): 5 0 像素 
阳 塞 (c)， = 一 二 场 % 
大 小 Sk Tm 9 像素 


品质 


杂 色 (N): < 0 % 
设置 为 默认 值 ”| | 复位 为 默认 值 | 


图 12-59 ”绘制 一 个 椭圆 形 图 12-60 设置 “内 阴影 ”图 层 样 式 


投影 
结构 
[ 取消 | = 混合 模式 EG)， 正片 盈 底 - El 
_ 新建 样 式 (W)..， | 不 透明 度 (O); 2 75 % 
加 (Vv = 
HONOV) 口 角度 Wi: (和) 335” 讼 加 使用 全 局 人 


FE CREXRRE 


图 12-61 设置 “外 发 光 ” 图 层 样式 12-62 设置 “投影 ”图 层 样式 

单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样 式 ， 效 果 如 图 12-63 所 示 。 

展开 “图 层 ” 面 板 ， 新 建 “ 图 层 5” 图 层 ， 如 图 12-64 所 示 。 

选择 工具 箱 中 的 椭圆 工具 ， 设 置 前 景色 为 黄色 (RGB 参数 值 为 184、146、 
14)， 如 图 12-65 所 示 。 

在 图 像 编辑 窗口 中 绘制 一 个 椭圆 形 ， 如 图 12-66 所 示 。 

复制 3 个 黄色 椭圆 形 ， 并 将 其 调整 至 合适 位 置 处 ， 如 图 12-67 所 示 。 

展开 “图 层 ” 面 板 ， 按 住 Ctrl 键 的 同时 依次 单 击 “ 图 层 4” 一 “图 层 5 拷贝 3” 
图 层 ， 选 中 这 5 个 图 层 ， 如 图 12-68 所 示 。 


Wa Pad 
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ES = 
IP 型 ?| 回 wTITZSSBRN 四 
| 正常 :| 不 通明 度 : |100% | > | 
锁定 :四 中身 填充 : |100% | ~ 


OH: 47 度 OL 
S092 Is 
B: 72 % 


OR: 184 
[ OG6: 146 
B: [14 | 
避 只 有 Web 颜色 


# b8920e 


图 12-66 经 制 黄色 椭圆 形 


正常 | 厦 委 明度 : |100% | ~ | 


说 E: 图 中国 填充 : 100% -~ 


0 所 加 日 向 辐 闸 < 


图 12-67 复制 椭圆 形 并 调整 其 位 置 图 12-68 ”选中 相应 图 层 
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LA 


选择 移动 工具 , 在 工具 属性 栏 中 依次 单 击 “ 顶 对 齐 ” 按 钮 画 | 和 “垂直 居中 对 齐 - 
按钮 则 ， 如 图 12-69 所 示 。 


这 浏 16| 展开 “图 层 ” 面 板 ， 新 建 “ 圆 点 ”图 层 组 ， 如 图 12-70 所 示 。 


) 类 型 (Y) 选择 (S) ”小 筑 个 3DID) ”视图 (V) 


5 示 变 换 控 件 | 西 |i| lm 单 击 上 | 于 


到 安吉 系 统 应 用 | 委 百 后 中 并 卉 上 (RG8/8) * 


P 类 型 ?| 加 TIZBm 四 


EE 


12-69 单 击 相应 按钮 


图 12-70 ”新 建 “ 圆 点 ”图 层 组 
i 汪 17| 将 “图 层 4” 一 “图 层 5 拷贝 3” 图 层 拖 虹 至 “ 圆 点 ”图 层 组 中 , 如 图 12-71 所 示 。 


元 河 18| 在 图 像 编辑 窗口 中 适当 调整 “ 圆 点 ”图 层 组 中 各 椭圆 形 的 位 置 ， 如 图 12-72 
所 示 。 


一 一 一 
Lpj 并 省 国 gw TB 由 
| 正常 :| 不 通明 度 : |100%| > | 
锁定 : 加 os 中 B@ ”填充 : |100%| -| 


 @ 思 名 图 点 | 


12-71 管理 图 层 组 


12-72 调整 椭圆 形 的 位 置 
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9 双 : 河 19 选择 横 排 文字 工具 ,在 图 像 编 辑 窗 口中 单 击 鼠标 左 键 , 确认 插入 点 , 在 “字符 ” 
面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 72 点 、“ 颜 色 ” 为 白色 ， 如 
图 12-73 所 示 。 

步骤 在 图 像 编辑 窗口 中 输入 相应 文字 ， 如 图 12-74 所 示 。 


Ed 


图 12-73 设置 文字 属性 图 12-74 输入 相应 文字 
打开 “应 用 商店 图 标 .psd” 素 材 图 像 ， 将 其 拖 蝶 至 “ 安 卓 系统 应 用 程序 界面 ” 
图 像 编辑 窗口 中 ， 并 调整 至 合适 位 置 ， 如 图 12-75 所 示 。 
选择 横 排 文 字 工具 , 在 图 像 编辑 窗口 中 单 击 鼠 标 左 键 ,确认 插入 点 , 在 “字符 ” 
面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 50 点 、“ 颜 色 ” 为 白色 ， 
如 图 12-76 所 示 。 


aa | 锐利 : 


图 12-75 添加 图 标 素材 图 像 图 12-76 设置 文字 属性 


ez 
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步骤 在 图 像 编辑 窗口 中 输入 相应 文字 ， 如 图 12-77 所 示 。 
步骤 使 用 与 上 述 同样 的 方法 , 输入 其 他 的 文字 , 完成 安 时 系统 应 用 程序 界面 的 设计 ， 
最 终 效 果 如 图 12-78 所 示 。 


所 有 应 用 程序 
区 


图 12-77 输入 相应 文字 图 12-78 最 终 效 果 


pA PG 


学习 提示 


Windows Phone 是 微软 发 布 的 一 款 手 机 操作 系统 ， 其 最 新 版 本 为 Windows 
10 Mobile， 它 将 微软 旗下 的 Xbox Live 游戏 、Xbox Music 音乐 与 独特 的 视频 体 
验 整 合 至 手机 中 。 本 章 主 要 介绍 微软 移动 系统 UI 的 设计 方法 。 


本 章 重 点 导航 


@ 微软 手机 拨号 键盘 界面 的 背 。” @ 微软 手机 用 户 界面 的 背景 
景 效 果 设 计 效果 设计 

© 微软 手机 拨号 键盘 界面 的 主 ”© 微软 系统 用 户 界面 的 整体 效 
体 效 果 设计 果 设计 


4000-8888-9999 
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13.1 ”拨号 键盘 ; 掌握 微软 手机 挨 号 键盘 的 设计 


打 电 话 、 发 短信 等 是 用 户 对 手机 的 最 基本 和 需求， 因此， 手机 中 的 拨号 键盘 成 为 用 户 每 天 
都 要 面 对 的 界面 。 好 的 拨号 键盘 UI 可 以 带 给 用 户 更 加 方便 、 快 捷 的 使 用 体验 ， 增 加 用 户 对 
手机 的 喜爱 。 

本 实例 最 终 效 果 如 图 13-1 所 示 。 


4000-8888-9999 


13. 1. 1 内 容 13. 1. 2 内 容 
请 扫 二 维 码 请 扫 二 维 码 
13.1.1 微软 手机 拨号 键盘 界面 的 背景 效果 设计 JJ 


下 面 主要 使 用 和 矩形 选 框 工具 、“ 内 发 光 ” 图 层 样式 、 变 换 控制 杠 、“ 边 界 ” 命 令 等 ， 设 
计 微 软 手 机 拨号 键盘 界面 的 背景 效果 。 

选择 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建 ” 对 话 框 ， 设 置 “ 名 称 ” 为 “微软 
手机 拨号 键盘 ”、“ 宽 度 ” 为 1080 像素 、“ 高 度 ” 为 1920 像素 、“ 分 辨 率 ” 为 72 像素 /英寸 、 
“颜色 模式 ”为 “RGB 颜色 ”、“ 背 景 内容 ” 为 “白色 ”， 如 图 13-2 所 示 。 

单 击 “确定 ”按钮 ， 新 建 一 个 空白 图 像 文件 ， 设置 前 景色 为 黑色 ， 按 
AlttDelete 组 合 键 ， 为 “背景 ”图 层 填充 前 景色 ， 如 图 13-3 所 示 。 

展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 如 图 13-4 所 示 。 
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名 称 (N): 微软 手机 拨号 键盘 
预 设 (P); 自 定 


宽度 (W): 
高 度 (H): 
分 辨 率 (R); 
颜色 模式 (M): 
背景 内 容 (CO): 


高 级 
像素 长 宽 比 0X): 
13-2 “新建” 对话 框 13-3 ”填充 前 景 


这 淹 04| 选择 工具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编 辑 窗 口中 创建 一 个 矩形 选区 ， 如 
图 13-3 所 示 。 


图 13-4 新建 “图 层 1” 图 层 图 13-5 “创建 矩形 选区 


设置 前 景色 为 深 灰色 (RGB 参数 值 均 为 51)， 如 图 13-6 所 示 。 

按 AlttDelete 组 合 键 ， 为 选区 填充 前 景色 ， 如 图 13-7 所 示 。 

按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 13-8 所 示 。 

双击 “图 层 1” 图 层 ， 在 弹出 的 “图 层 样 式 ” 对 话 框 中 勾 选 “内 发 光 ” 复 选 框 ， 
设置 “发 光 颜 色 ” 为 白色 、“ 大 小 ”为 2 像素， 如 图 13-9 所 示 。 
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pp 


中 只 有 Web 颜色 


混合 模式 (5); 小 色 
不 透明 度 (D): 新 建 样式 (W)..。 | 


杂 色 人 N): G 避 预 览 (V) 


条 和 
源 :人 居中 但 ) 同 边 售 (6) 
阻塞 (0): G 
大 小 (5): 5 


等 高 线 避 潭 除 据 点 (0) 
范围 (R): 3 50 % 
拉动 0): 6 0— % 


复位 为 默认 值 


图 13-8 ”取消 选区 图 13-9 设置 “内 发 光 ” 图 层 样式 
2 天河 09| 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 “内 发 光 ” 图 层 样 式 ， 效 果 如 图 13-10 所 示 。 


p 雪 当 10| 打开 “电话 图 标 .psd” 素 材 图 像 ， 将 其 拖 上 至 “微软 手机 拨号 键盘 ”图 像 编辑 
窗口 中 的 合适 位 置 处 ， 如 图 13-11 所 示 。 


天 河 11 | 按 Ctrl+T 组合 键 ， 调 出 变换 控制 框 ， 如 图 13-12 所 示 。 


2 逐 河 12| 适当 调整 电话 图 标的 大 小 和 位 置 ， 并 按 Enter 键 确 认 变换 操作 ， 效 果 如 
图 13-13 所 示 。 


局 13| 按 住 Ctrl 键 的 同时 单 击 “电话 图 标 ” 图 层 的 缩 览 图 ， 将 其 载 入 选区 ， 如 
图 13-14 所 示 。 


于 当 14| 选择 “选择 ”|“ 修 改 ”|“ 边 界 ” 命 令 ， 如 图 13-15 所 示 。 
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ry 基 

下 "各 * 室 
py 国 ©@THNH 9 加 TUH gp 
正 党 :| Ti 及 :| TSB 辽 : |: 
该 E: 因 ww 中 日 培 充 锁定 : 四 w 中 站 填充 : 00% 
.| | me 在 » | | wi 

于 效果 

量 内 发 光 e | | Ee: A 
= 国 ”> @ ee 


所 .加 巴 .上 白 加 让 PN 


图 13-10 应 用 “内 发 光 ” 图 层 样 式 效果 13-11 添加 电话 图 标 素 材 图 像 


< 


友 . 回 心 . 外 司 语 3 .加 .和 铅 加 全 :| 


图 13-12 ” 贡 出 变换 控制 杠 图 13-13 ” 贡 整 电话 图 标的 大 小 和 位 置 

执行 上 述 操作 后 ， 弹 出 “边界 选区 ”对 话 框 ， 设 置 “宽度 ”为 5 像素， 如 
图 13-16 所 示 。 

单 击 “ 确 定 ”按钮 ， 即 可 创建 边界 选区 ， 如 图 13-17 所 示 。 

在 “图 层 ”面板 中 ， 新 建 “图 层 2” 图 层 ， 如 图 13-18 所 示 。 

设置 前 景色 为 白色 , 按 AlttDelete 组 合 键 , 为 选区 填充 前 景色 , 如 图 13-19 所 示 。 

在 “图 层 ”面板 中 ， 隐 藏 “电话 图 标 ” 图 层 ， 效 果 如 图 13-20 所 示 。 

按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 13-21 所 示 。 


269 于 -一 


帮 


Photoshop™®== >>>>> 


和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


故 汪 可 污 间 m 3DID) 视图 (V) 窗口 (W) ”帮助 (H) 


A + 大 < 
全 间 从) Cul+A | | 运 S 屏 阿 | 韦 充 屏 基 
取消 渤 择 (D) Cul#D | 


重新 选择 (E) Shift+Ctrl+D 


有 反 向 (D) Shift+Ctrl+I 


3 100% (电话 图 标 , RGB/8) * x 


所 有 图 层 (U Ak+Ctrl+A 
取消 选择 加 层 (S) 
查找 图 层 Alt+Shift+Ctrl+F 


四 TIZIg 昌 
?| 韦 要 明度 : |100%| - 
说: 图 中 BB 填充 :|100%|- 


边界 (B).… 
平滑 (S).… 


扩大 远 取 (G) 
远 取 栓 (R) 3 
收缩 (C)... 
变 接 迁 区 (T) 羽化 (月 .,， Shift+F6 


在 快速 蒙 版 模式 下 编辑 (Q) 


载 入 选区 (O)... 
存 售 选区 (V).. 


新 建 3D 模型 (3) 


图 13-14 载 入 选区 图 13-15 ”选择 “边界 ” 佣 令 


图 13-16 “边界 选区 ”对 话 框 图 13-17 创建 边界 选区 
恬 层 
Pi 加 TITZBD 症 
LE 常 。。_。| 要 明度 : [100%| - 


锦 放 :加 A 中 看 境况 :100%| 


ET oe | 
= 上 | 


co .四 @. 白 加 从 


中 .加 四. 四 回 会 : 


13-18 新建“ 图 层 2” 图 层 13-19 ”填充 前 景 


i OO 
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《<<<< 


KS 


图 13-20 ”隐藏 “电话 图 标 ”图 层 图 13-21 ”取消 选区 


不 ; 河 21| 在 “图 层 ” 面 板 中 设置 “图 层 2” 图 层 的 “不 透明 度 ” 为 30%， 如 图 13-22 所 示 。 
执行 上 述 操 作 后 ， 即 可 改变 图 像 效 果 ， 如 图 13-23 所 示 。 


所 0. 让 加 曾 


13-22 设置 图 层 的 不 透明 度 13-23 ”图像 效果 


13.1.2 ”微软 手机 拨号 键盘 界面 的 主体 效果 设计 JJ 


下 面 主要 使 用 矩形 选 框 工具 、 渐 变 工 具 、“ 摘 边 ” 命 令 及 素材 图 像 等 ， 设 计 微 软 手 机 找 


号 键盘 的 主体 效果 。 
观 ; 洒 01| 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 3” 图 层 ， 如 图 13-24 所 示 。 
pg 二 02 选择 工具 箱 中 的 矩形 选 框 工具 ， 在 图 像 编 辑 窗 口中 创建 一 个 矩形 选区 ， 如 


图 13-25 所 示 。 


msn 
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T 通 明度 

锦 E: 田 of 中 BB 填充 :|100%| -| 
上 
-ee 居 


a 


图 13-24 新 建 “ 图 层 3” 图 层 图 13-25 创建 和 矩 形 选 区 


p 妇 对 03| 选择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “点 按 可 编辑 渐变 ”按钮 ， 如 
13-26 所 示 。 

p 束 当 04| 弹出 “渐变 编辑 器 ”对 话 框 ， 设 置 浅 蓝 色 RGB 参数 值 为 172、195、243) 到 
紫色 (RGB 参数 值 为 56、36、74) 的 潮 变 色 ， 如 图 13-27 所 示 。 


PS 文件 (F) ”编辑 (E ”图像 四 ”图 层 (L) ”类 型 (Y) 


| Il + ol 
微软 手机 | 点 按 可 编辑 新 变 |5% (图 层 3 RGB/8) 


转 渐变 类 型 (T): 实 底 
平滑 度 (M): 100 上 


7 


2 


CR 


图 13-26 单 击 “ 点 按 可 编辑 渐变 ”按钮 13-27 ”设置 渐变 色 
去; 洒 05| 单 击 “ 确 定 ” 按 钮 ， 在 工具 属性 栏 中 单 击 “ 径 向 渐变 ”按钮 贺 ， 从 上 到 下 为 矩 
形 选 区 填充 径 问 渐变， 如 图 13-28 所 示 。 
对; 汪 06| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 13-29 所 示 。 
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图 13-28 填充 径 癌 渐变 13-29 取消 选区 
p 女 当 07| 打开 “分 割 线 .psd” 素 材 图 像 ， 将 其 拖 虹 至 “微软 手机 拨号 键盘 ”图 像 编辑 窗 
口中 的 合适 位 置 处 ， 如 图 13-30 所 示 。 
p 台 5 当 08| 选择 “编辑 ”|“ 描 边 ” 命 令 , 弹出 “ 描 边 ” 对 话 框 , 设置 “宽度 ”为 “15 像素 ”、 
-颜色 ”为 墨色， 如 图 13-31 所 示 。 


名 居中 (C) 名 居 》MU) 


模式 (M): 正常 
不 透明 度 (D): 100 % 
由 保留 透明 区 域 (P) 


13-30” 拖 入 分 割 线 素材 图 像 图 13-31 “ 摘 边 ”对 话 框 


古河 09| 单 击 “ 确 定 ” 按 钮 ， 应 用 描 边 效果 ， 如 图 13-32 所 示 。 
p 束 3 当 10| 打开 “拨号 键盘 状态 栏 . psd” 素材 图 像 ， 将 其 拖 虹 至 “微软 手机 拨号 键盘 ”图 
像 编 辑 窗口 中 的 合适 位 置 处 ， 如 图 13-33 所 示 。 
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4000-8888-9999 
a 


图 13-32 应 用 描 边 效 果 图 13-33” 拖 入 状态 栏 素材 图 像 


pg 台 11 打开 “拨号 键盘 文字 .psd” 素 材 图 像 ， 将 其 拖 忠 至 “微软 手机 拨号 键盘 ”图 像 
编辑 窗口 中 的 合适 位 置 处 , 最 终 效 果 如 图 13-34 所 示 。 可 以 根据 需要 , 设计 出 其 他 颜色 的 效果 ， 
如 图 13-35 所 示 。 


4 辐 轩 
7 二 四 
X 四 末 


4000-8888-9999 


13-34 最终 效果 13-35 扩展 效果 


13.2， 用 户 界面 : 掌握 微软 手机 用 户 界面 的 设计 


微软 手机 系统 的 用 户 界面 被 称 为 Metro， 它 通过 向 单 直接 的 方式 向 用 户 至 现 信息 ， 使 用 
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户 获 得 流畅 、 快 速 的 操作 体验 。 
本 实例 的 最 终 效果 如 图 13-36 所 示 。 


13.2. 1 内 容 13. 2. 2 内 容 
请 扫 二 维 码 请 扫 二 维 码 
13.2.1 微软 手机 用 户 界面 的 背景 效果 设计 时 


在 制作 微软 手机 用 户 界 面 的 背景 效果 时 , 使 用 了 参考 线 、 和 矩形 工具 、 素 材 图 像 、 剪 贴 蒙 版 、 
图 像 调整 命令 等 。 下 面 介绍 设计 微软 手机 系统 用 户 界 面 背 景 效果 的 操作 方法 。 

选择 “文件 ” |“ 打开” 命令 ， 打 开 “ 用 户 界 面 背景 . psd” 素材 图 像 ， 如 图 13-37 
所 示 。 

在 “图 层 ”面板 中 ， 新 建 “图 层 1” 图 层 ， 如 图 13-38 所 示 。 

设置 前 景色 为 黑色 ， 按 AlttDelete 组 合 键 ， 为 “图 层 1” 图 层 填充 前 景色 ， 如 
图 13-39 所 示 。 

在 “图 层 ”面板 中 ， 新 建 “ 图 层 2” 图 层 ， 如 图 13-40 所 示 。 


FA 


有 
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图 13-37 打开 素 材 图 像 图 13-38 ”新建 “图 层 1” 图 层 


图 13-39 ”填充 前 景 图 13-40 新建“ 图 层 2” 图 层 


设置 前 景色 为 白色 ,借助 参考 线 调 整 间 距 ， 选 择 工具 箱 中 的 甜 形 工 具 ， 在 工具 
属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 绘 制 一 个 矩形 ， 如 图 13-41 所 示 。 

使 用 和 矩形 工具 在 右 侧 的 参考 线 位 置 处 绘制 一 个 小 给 形 ， 如 图 13-42 所 示 。 

使 用 与 上 述 同 样 的 方法 ， 绘 制 其 他 的 矩形 ， 效 果 如 图 13-43 所 示 。 

打开 “背景 jpg” 素 材 图 像 ， 将 其 拖 归 至 “用 户 界 面 背 景 ” 图 像 编辑 窗口 中 ， 
如 图 13-44 所 示 。 

按 CtrltT 组 合 键 ， 调 出 变换 控制 框 ， 如 图 13-45 所 示 。 

通过 调整 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 按 Enter 键 确 认 变换 操作 ， 
效果 如 图 13-46 所 示 。 
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pd :| 加 THD EE 


13-41 绘制 矩形 13-42 ”绘制 矩形 


13-43 ”绘制 其 他 的 和 矩形 图 13-44 拖 入 素材 图 像 


13-45 ” 调 出 变换 探 制 框 13-46 ”变换 图 像 


a = 


有 


Photoshop 罗 一 一 > 


四 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 


更 河 11| 选择 “图 像 ”|“ 调 整 ”|“ 亮 度 / 对比度 ”命令 ,弹出 “亮度 /对 比 度 ”对话 框 ， 
设置 “亮度 ”为 -2、“ 对 比 度 ” 为 15， 如 图 13-47 所 示 。 
pe 玉河 12| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 效 果 如 图 13-48 所 示 。 


趾 使 用 | 昌 版 (L) 


13-47 “亮度 / 对比度” 对 话 框 13-48 ”调整 图 像 的 亮度 和 对 比 度 
pg 旭 5 当 13| 选择 “图 像 ”|“ 调 整 ”|“ 色 相 / 饱 和 度 ” 命 令 ,， 弹出 “色相 /饱和 度 ” 对 话 框 ， 
设置 “色相 ”为 16、“ 饱 和 度 ” 为 +32， 如 图 13-49 所 示 。 
如 14| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 色相 和 饱和 度 ， 效 果 如 图 13-50 所 示 。 


器 着 色 (0) 
区 A A mp) 


图 13-49 “色相 /饱和 度 ” 对 话 框 13-50 ”调整 图 像 的 色相 和 人 饱和 度 


p 组 2 15| 选择 “视图 | 显示 额外 的 内 容 ” 命令, 即 可 隐藏 参考 线 , 效果 如 图 13-51 所 示 。 
三河 16| 选择 “ 滤 镜 ”|“ 模 糊 ”|“ 表 面 模糊 ”命令 ， 如 图 13-52 所 示 。 
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3CD) ” 视 固 (V) ”窗口 (W) 医 助 (H) 
a | 本 和 | 运 横 


13-51 ”隐藏 参考 线 13-52 ”选择 “表面 模糊 ”命令 
2 到 河 17| 执行 上 述 操作 后 ， 弹 出 “表面 模糊 ”对 话 框 ， 设 置 “ 半 径 ” 为 5 像素 、“ 国 值 ” 
为 15 色 阶 ， 如 图 13-53 所 示 。 
证 浏 18| 单 击 “ 确 定 ”按钮 ， 应 用 “表面 模糊 ” 滤 镜 ， 减 少 画面 中 的 噪点 ， 效 果 如 
图 13-54 所 示 。 


预览 (P) 


六 值 (T): [15 ”| 色 阶 


图 13-53 “表面 模糊 ”对 话 框 图 13-54 应 用 “表面 模糊 ” 滤 镜 效果 


gm 19| 在 “图 层 ” 面 板 中 ， 选 择 “ 图 层 3” 图 层 ， 如 图 13-55 所 示 。 
p 台 5 当 20| 选择 “图 层 ”|“ 创 建 剪贴 蒙 版 ”命令 ， 如 图 13-56 所 示 。 
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辆 要 加 | 关 型 Y) 运 择 (S) 小 入 (TD 3D(D) 视图 (V) 窗口 (W) 


新 建 (N) 》 日 昌 | 吾 盖 羡 


和 悠 制 CSS 

复制 图 层 (D)... 

宰 除 》 
重合 名 图 层 ... 

图 层 样 式 (Y) 
智能 污 谤 
新 建 填 充 图 层 (W) 》 
新 建 尘 整 图 层 (J) 》 
图 层 内 容 选 项 (O)... 


取消 图 层 编 组 (U) Shift+Ctrl+G 
降 藻 辐 层 (R) 
排列 (A) 》 
会 并 形状 (H) 
图 13-55 ”选择 “图 层 3” 图 层 13-56 ”选择 “创建 剪贴 蒙 版 ”命令 


运河 21| 执行 上 述 操作 后 ， 即 可 创建 剪贴 蒙 版 ， 效 果 如 图 13-57 所 示 。 
于 5 当 22 打开 “用 户 界面 状态 栏 . psd” 素材 图 像 ， 将 其 拖 昌 至 “用 户 界面 背景 ”图 像 编 
辑 窗 口中 的 合适 位 置 ， 如 图 13-58 所 示 。 


图 13-57 ”创建 剪贴 蒙 版 图 层 效果 图 13-58 ，” 拖 入 状态 栏 素材 图 像 
13.2.2 微软 系统 用 户 界面 的 整体 效果 设计 D 


将 手机 用 户 界面 的 图 像 、 图 标 和 文字 说 明 等 元 素 添加 到 界面 中 ， 即 可 完成 微软 手机 系统 
用 户 界 面 整体 效果 的 制作 。 下 面 介 绍 设计 微软 手机 系统 用 户 界 面 整体 效果 的 操作 方法 。 
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二 01| 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 4” 图 层 ， 如 图 13-59 所 示 。 
到 5 汪 02| 选择 工具 箱 中 的 矩形 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 


绘制 一 个 白色 矩形， 如 图 13-60 所 示 。 


| 
认定: 四 /中 8 十 8:[iooy%]-] 


f. 回 .向 辐 便 


13-59 新建“ 图 层 4” 图 层 图 13-60 经 制 白色 和 矩 形 


p 束 当 03| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 “ 游 戏 jpg” 素 材 图 像 ， 如 图 13-61 所 示 。 
pe 细 上 雪 04| 使 用 移动 工具 将 其 拖 虹 至 “用 户 界 面 背 景 "图 像 编辑 窗口 中 ,生成 “图 层 5” 图 层 ， 


如 图 13-62 所 示 。 


i 一 于 
p 妈 :加 DOTZSGSC 目 


图 13-62 拖 入 素材 图 像 


图 13-61 打开 素材 图 像 
去; 滞 05| 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 如 图 13-63 所 示 。 
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p 台 06| 通过 调整 变换 控制 框 ， 适当 调 整 图像 的 大 小 和 位 置 ， 按 Enter 键 确认 变换 操作 ， 
效 采 如 图 13-64 所 示 。 


图 13-63” 调 出 变换 控制 框 图 13-64 ”调整 图 像 的 大 小 和 位 置 


如 当 07| 在 “图 层 ” 面 板 中 选择 “图 层 5” 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 “创建 剪贴 蒙 版 ”命令 ， 如 图 13-65 所 示 。 
2 碗 洒 08| 执行 上 述 操作 后 ， 即 可 创建 剪贴 莹 版 ， 效 果 如 图 13-66 所 示 。 


启用 图 后 蒙 版 
启用 矢量 蒙 版 
创建 般 贴 蒙 版 


链接 图 层 
选择 链接 图 层 
拷贝 图 层 样式 
粘贴 图 层 样 式 
清除 图 层 样式 
复制 形状 属性 
粘贴 形状 尾 性 
从 隔 高 图 层 释放 
向 下 合并 
合并 可 见 图 层 
拼合 图 像 
无 匡 色 


红色 
往 色 


图 13-65 选择 “创建 剪贴 蒙 版 ”命令 图 13-66 ”创建 剪贴 蒙 版 效果 


邓 汪 09 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 6” 图 层 ， 如 图 13-67 所 示 。 
二 洒 10 选择 工具 箱 中 的 矩形 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 
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绘制 一 个 白色 矩形 ， 如 图 13-68 所 示 。 


中 .加 中 .外 加 疹 


图 13-67 新建 “图 层 6” 图 层 图 13-68 绘制 白色 矩形 
2 型 湖 11| 在 “图 层 ” 面 板 中 ， 新 建 “ 图 层 7” 图 层 ， 如 图 13-69 所 示 。 


更 河 12| 选择 工具 箱 中 的 矩形 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 
绘制 一 个 白色 矩形， 如 图 13-70 所 示 。 


Se 图 
人 
有 
(后 


| 
| 


| 


4 
到 
丽 
Cy 


弯 E : 
SE 
加 


co 反 . 回 .外 问 全 
图 13-69 新建 “图 层 7” 图 层 图 13-70 ”绘制 白色 甜 形 


2 观 过 13| 复制 “图 层 7” 图 层 ， 得 到 “图 层 7 拷贝 ”图 层 ， 如 图 13-71 所 示 。 
区 中 14 使 用 移动 工具 适当 调整 “图 层 7 拷贝 ”图 层 中 图 像 的 位 置 ， 效 果 如 图 13-72 
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图 13-71 复制 图 层 图 13-72 调整 图 像 的 位 置 


对 对 15| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打开 “照片 (1).jpg” 素 材 图 像 ， 如 图 13-73 所 示 。 
9 去; 河 16 使 用 移动 工具 将 该 素材 图 像 拖 中 至 “用 户 界面 背景 ”图 像 编 辑 窗 口中 ， 并 适当 
调整 其 大 小 和 位 置 ， 生 成 “图 层 8” 图 层 ， 如 图 13-74 所 示 。 


~ 


13-73 打开 照片 素材 图 像 图 13-74 拖 入 并 调整 素材 图 像 
可 17| 在 “图 层 ” 面 板 中 ,将 “图 层 8” 图 层 调整 至 “图 层 6” 图 层 的 上 方 ， 如 
图 13-75 所 示 。 
吉 河 18| 按 AltrCtrl+G 组 合 键 ， 创 建 剪贴 莹 版， 效果 如 图 13-76 所 示 。 


CL 
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CAA 


GD 六 . 罗 人 . 面 国 会 .: 


13-75 贡 整 图 层 顺 序 图 13-76 创建 剪贴 蒙 版 效果 
地 当 19| 选择 “文件 ”|“ 打 开 ” 命 令 ， 打开 “照片 (2)jpg” 素 材 图 像 ， 如 图 13-77 所 示 。 
9 运河 20 使 用 移动 工具 将 该 素材 图 像 拖 虹 至 “用 户 界面 背景 ”图 像 编辑 窗口 中 ， 并 适当 
调整 其 大 小 和 位 置 ， 生 成 “图 层 9” 图 层 ， 如 图 13-78 所 示 。 


ws) 18:08 


图 13-78 拖 入 并 调整 素材 图 像 


图 13-77 打开 照片 素材 图 像 
ph 尖 21| 在 “图 层 ” 面 板 中 ， 将 “图 层 9” 图 层 调整 至 “图 层 7” 图 层 的 上 方 ， 如 


图 13-79 所 示 。 
开 河 22| 按 AlttCtrltG 组 合 键 ， 创 建 剪贴 蒙 版 ， 效 果 如 图 13-80 所 示 。 
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LI 党 。 | 二 明度: [100%| -| 
锁定 : 四 os 中 B@ 。 填 训 :|100%| -| 


OH Kr. 回 四 .和 白 耸 .: 
图 13-79 ”调整 图 层 顺 序 图 13-80 ”创建 剪贴 蒙 版 效果 


pg 菇 5 当 23| 使 用 与 上 述 同样 的 方法 ， 拖 中 其 他 照片 素材 图 像 至 “用 户 界面 背景 ”图 像 编 辑 
窗口 中 ， 并 创建 剪贴 莹 版， 效果 如 图 13-81 所 示 。 
2 碗 洒 24| 在 “图 层 ” 面 板 中 创建 一 个 新 图 层 组 ， 将 其 命名 为 “图 片 ”， 如 图 13-82 所 示 。 


?| 加 TIDSBD 晶 


全 . 
- 机 


鳄 E: 因 A 中 8 境 训 :too%[ -| 


| 
本 3 EE we 

~ -4 站 有 和 
| 


中 所 加 日 辐 辣 。 


图 13-81 添加 其 他 素材 图 像 效 果 13-82 创建 新 图 层 组 


去; 洒 25| 将 “图 层 6” 一 “图 层 10” 图 层 拖 电 至 “图 片 ”图 层 组 中 ， 如 图 13-83 所 示 。 
去 ;党 26 打开 “图 标 与 文字 .psd” 的 素材 图 像 ， 将 其 拖 昌 至 “用 户 界面 背景 ”图 像 编 辑 
窗口 中 ， 完 成 用 户 界面 的 设计 ， 最 终 效 果 如 图 13-84 所 示 。 
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[了 。” | 和 也 明度 : [100%| 
钠 定 : 加 w 中 B 填充: [100%|-| 


图 13-83 ”管理 图 层 组 图 13-84 ”最终 效果 
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学 习 提 示 


智能 手机 出 现 之 后 ， 手 机 的 通信 功能 正在 变 弱 ， 而 智能 社交 功能 正在 变 强 ， 
用 户 停留 在 微 信 .QQ 空间 . 微 博 等 社交 APP 上 的 时 间 .花费 的 精力 正在 大 幅 增 加 。 
本 章 将 通过 制作 手机 APP 的 登录 界面 ， 为 读者 讲解 社交 APP UI 及 免费 WiFi UI 
的 制作 方法 。 


本 章 重点 导航 


© 云 社交 APP 登录 界面 的 背景 ” @ 免费 WiFi 应 用 登录 界面 的 表单 按 
效果 设计 钮 设计 

@ 云 社交 APP 登录 界面 的 文字 ”© 免费 WiFi 应 用 登录 界面 的 细节 和 
效果 设计 文本 设计 


© 免费 WiFi 应 用 登录 界面 的 背 
景 效果 设计 


Photoshop 肥 皖 一 >>>>> 
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14.1， 云 社交 : 掌握 云 社交 登录 界面 的 设计 


如 果 说 微 信 、QQ 及 陌 阴 等 都 是 基于 聊天 交友 的 社交 应 用 ,那么 云 社交 则 是 在 此 基础 上 ， 
通过 图 片 、 数 据 等 的 互联 与 分 享 ， 实 现 用 户 之 间 连 接 的 一 种 全 新 的 移动 应 用 。 本 实例 主要 介 
绍 手机 云 社交 APP 登录 界面 的 设计 ， 最 终 效 果 如 图 14-1 所 示 。 


14.1.1 内容。 吕 活 中。 14.1.2 内 秩 
请 扫 二 维 码 3 请 扫 二 维 码 
14.1.1 云 社交 APP 登录 界面 的 背景 效果 设计 I 
下 面 主要 使 用 横 排 文字 工具 、“ 字 符 ” 面 板 、“ 描 边 ”图 层 样式 等 ， 制 作 云 社交 APP 的 


文字 效果 。 

新 建 一 个 “名 称 ”为 “ 云 社交 APP 界面 ”、“ 宽 度 ”为 640 像素 、“ 高 度 ” 
为 1136 像素 、“ 分 辩 率 ”为 72 像素 / 英寸 的 空白 图 像 文 件 ， 如 图 14-2 所 示 。 

打开 “ 云 社交 APP 背景 jpg” 素 材 图 像 ， 将 其 拖 忠 至 “ 云 社交 APP 界面 ”图 
像 编辑 窗口 中 ， 适 当 调整 其 大 小 和 位 置 ， 效 果 如 图 14-3 所 示 。 
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14-2 新建 空白 图 像 文件 图 14-3 ” 拖 入 并 贡 整 素材 图 像 
这 河 03| 选择 “图 像 ”|“ 调 整 ”|“ 亮 度 /对比度 ”命令 ， 弹 出 “亮度 /对比度 ”对 话 框 ， 
设置 “亮度 ”为 13、“ 对 比 度 ”为 18， 如 图 14-4 所 示 。 
p 台 5 当 04| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 效 果 如 图 14-5 所 示 。 


| 


图 14-4 设置 “亮度 /对比度 ”参数 图 14-5 ”调整 图 像 的 亮度 和 对 比 度 
步骤 选择 “图像 | "调整 ”| ”自然 饱和 度 ” 命令 , 弹出 “自然 饱和 度 ” 对 话 框 , 设置 “ 自 
然 包 和 度 ” 为 30、“ 饱 和 度 ” 为 13， 如 图 14-6 所 示 。 
过; 河 06| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 饱和 度 ， 效 果 如 图 14-7 所 示 。 
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图 14-6 ”设置 参数 图 14-7 调整 图 像 的 饱和 度 


td 展开 “图 层 面板， 新 建 “ 图 层 2 图 层 ， 如 图 14-8 所 示 。 
.08| 设置 前 景色 为 蓝 色 (RGB 参数 值 为 7 3、126、178)， 如 图 14-9 所 示 。 


I 210 | 51 
* 59 |% Oa 6 
”70 |% ©b: |-33 


73 C75 % 

: 126 M: 47 % 

| 178 Y: 17 |5% 

中 fk. 回 .向 加 亩 口 只 有 Web 颜色 EE | Ko0o % 
LTD 


图 14-8 新建“ 图 层 2” 图 层 图 14-9 设置 前 景色 

CO go dn ci 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “ 像 
未 ”、 二 为 10 像素 ， 绘 制 一 个 圆 角 抑 形 ， 如 图 14-10 所 示 。 

双击 “图 层 2” 图 层 , 弹出 “图 层 样 式 ” 对 话 框 , 勾 选 “投影 ” 复 选 框 , 设置 “ 距 
离 ” 为 6 像素 、“ 扩 展 ” 为 13%、“ 大 小 ”为 16 像素， 如 图 14-11 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 应 用 “投影 ”图 层 样式 ， 效 果 如 图 14-12 所 示 。 

在 “图 层 ” 面 板 中 ,设置 “图 层 2” 图 层 的 “不 透明 度 ” 和 “填充 ” 均 为 
60%， 改 变 图 像 的 透明 效果 ， 如 图 14-13 所 示 。 
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图 14-10 ”经 制 圆 角 和 矩 形 图 14-11 设置 “投影 ”图 层 样 式 


图 14-12 应 用 “投影 ”图 层 样 式 效果 图 14-13 改变 图 像 的 透明 效果 


在 Photoshop 中 ， 不 透明 度 用 于 控制 图 层 中 所 有 对 象 的 透明 属性 。 通 过 设置 图 层 的 不 
透明 度 ， 能 够 使 图 像 主体 更 突出 。 


过 河 13| 打开 “按钮 组 psd” 素材 图 像 ， 将 其 拖 电 至 “ 云 社 交 APP 界面 ”图 像 编辑 窗 
口中 的 合适 位 置 处 ， 效 果 如 图 14-14 所 示 。 
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天 说 14| 打开 “ 云 社交 APP 状态 栏 .psd” 素 材 图 像 ， 将 其 拖 昌 至 “ 云 社交 APP 界面 ” 
图 像 编 辑 窗 口中 的 合适 位 置 处 ， 如 图 14-15 所 示 。 


"Ww 


yy 


图 14-14 添加 按钮 素材 图 像 14-15 添加 状态 栏 素 材 图 像 


14.1.2 云 社交 APP 登录 界面 的 文字 效果 设计 JU 


下 面 主要 使 用 “亮度 / 对比度” 命令 、“ 自 然 饱和 度 ” 命 令 、 圆 角 矩 形 工 具 、“ 投 影 ” 
图 层 样式 等 ， 制 作 云 社交 APP 的 背景 效果 。 

打开 “ 云 社交 APP LOGO.psd” 素 材 图 像 ， 将 其 拖 忠 至 “ 云 社交 APP 界面 ”图 
像 编辑 窗口 中 的 合适 位 置 处 ， 如 图 14-16 所 示 。 

选择 工具 箱 中 的 横 排 文字 工具 , 在 图 像 编辑 窗口 中 单 击 鼠标 左 键 , 确认 插入 点 ， 
展开 “字符 ”面板 , 设置 “字体 系列 ”为 “方正 大 标 宋 简体 ”、“ 字 体 大 小 ”为 “80 点 ”、“ 字 
距 调整 ”为 20、“ 颜 色 ” 为 白色 ， 如 图 14-17 所 示 。 

在 图 像 编辑 窗口 中 输入 相应 文本 ， 如 图 14-18 所 示 。 

双击 文本 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 勾 选 “ 描 边 ” 复 选 框 ， 设置 “大 小 ” 
为 1 像素 、“ 颜 色 ” 为 绿色 (RGB 参数 值 分 别 为 0、255、0)， 如 图 14-19 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 应 用 “ 描 边 ”图 层 样 式 ， 效 果 如 图 14-20 所 示 。 

复制 文本 图 层 ， 得 到 相应 的 副本 图 层 ， 如 图 14-21 所 示 。 
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14-16 添加 LOGO 素材 图 像 14-17 设置 文字 属性 
rw 


图 14-18 输入 相应 文本 图 14-19 设置 “ 描 边 ”图 层 样式 
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14-20 应用“ 描 边 ” 图 层 样 式 效果 
在 图 像 编 辑 窗口 中 ， 适 当 调 整 文本 副本 图 层 中 的 文字 位 置 ， 使 文字 产生 立体 效 
果 ， 如 图 14-22 所 示 。 
选择 工具 箱 中 的 横 排 文字 工具 , 在 图 像 编辑 窗口 中 单 击 鼠标 左 键 , 确认 插入 点 ， 
展开 “字符 ”面板 ， 在 其 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 “36 点 ”、“ 字 
距 调整 ”为 20、“ 颜 色 ” 为 白色 ， 并 激活 “ 仿 粗 体 ”按钮 国 ， 如 图 14-23 所 示 。 


7 
有 
“对 


< 
2 


图 14-22 ”文字 效果 图 14-23 设置 文字 属性 


2 型 河 09| 在 图 像 编 辑 窗口 中 输入 相应 文本 ， 如 图 14-24 所 示 。 
到 浏 10| 使 用 与 上 述 同样 的 方法 ， 输 入 其 他 文本 ， 设 置 相 应 属性 ， 完 成 手机 云 社交 APP 
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登录 界面 的 设计 ， 效 果 如 图 14-25 所 示 。 


图 14-24 输入 相应 文本 图 14-25 输入 相应 文本 


14.2 ”免费 WiFi: 掌握 免费 WiFi 登录 界面 的 设计 


“登录 界面 ” 指 的 是 需要 提供 账号 密码 验证 的 界面 ， 有 控制 用 户 权 限 、 记 录用 户 行为 、 
保护 操作 安全 的 作用 。 如 采 已 经 设计 了 一 款 手 机 应 用 程序 ， 那 么 ， 下 一 步 要 思考 的 就 应 该 是 
怎样 才能 让 更 多 的 人 看 到 并 乐于 使 用 它 。 一 个 有 创意 的 登录 界面 绝对 能 够 保证 这 款 应 用 程序 
的 成 功 推 广 。 本 市 将 介绍 免费 WiFi 登录 界面 的 设计 方法 ， 最 终 效果 如 图 14-26 所 示 。 


1 党 日 


N 


免费 WiFi 


随时 随地 ， 自 由 上 网 ! 


几 | OQ 请 输入 您 的 手机 Ss 码 。 丑 


| 6 请 输入 您 的 密码 


14-26 ”实例 效果 


po a = 
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14. 2. 1 内 容 
请 扫 二 维 码 
14.2.1 免费 WiFi 应 用 登录 界面 的 背景 效果 设计 JU 


如 今 ， 无 论 是 在 何 时 何 处， 免费 WiFi 都 处 于 供不应求 的 状态 。 本 实例 中 的 免费 WiFi 应 
用 是 专门 为 手机 用 户 打造 的 一 款 方便 手机 上 网 的 软件 。 下 面 主要 使 用 和 矩形 选 框 工具 、 渐 变 工 
具 及 圆 角 和 矩形 工具 等 ， 制 作 免 费 WiFi 应 用 登录 界面 的 背景 效果 。 

选择 “文件 ”| “新建” 命令 ， 弹 出 “新 建 ” 对 话 框 ， 设置“ 名称” 为 “免费 
WiFi 应 用 登录 界面 ”、“ 宽 度 ” 为 1080 像素 、“ 高 度 ” 为 1920 像素 、“ 分 辨 率 ” 为 72 像 
素 / 闫 寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”“ 背 景 内 容 ” 为 “白色 ”， 单 击 “ 确 定 ” 按 钮 ， 新 
建 一 个 空 日 图 像 文件 ， 展 开 “ 图 层 ” 面 板 ， 新 建 “图 层 1” 图 层 ， 如 图 14-27 所 示 。 


图 14-27 新建 空白 图 像 和 图 层 

2 到; 洒 02| 设置 前 景色 为 黑色 ， 按 AlttDelete 组 合 键 ,为 “图 层 1” 图 层 填充 黑色 ， 如 
图 14-28 所 示 。 

这 洒 03| 选择 工具 箱 中 的 矩形 选 框 工具 ， 绘 制 一 个 矩形 选区 ， 如 图 14-29 所 示 。 

2 碗 河 04| 新 建 “图 层 2” 图 层 ， 选 择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “点 按 
可 编辑 渐变 ”按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐 变色 ，RGB 参数 值 分 别 为 (161、 
212、236) 和 (18、125、236)， 设 置 效 果 如 图 14-30 所 示 。 

pg 台 当 05| 单 击 “ 确 定 ” 按 钮 ， 从 上 至 下 为 选区 填充 线性 渐变 ， 效 果 如 图 14-31 所 示 。 


二 是 登录 界面 : 
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灰 . 四 OO. 如 时 合 -| 


14-28 填充 前 景色 图 14-29 


绘制 矩形 选区 

预 设 本 FE。 = : | 
4 py FE 和 

FA fa A SAR 载 入 (L).. 

存储 (5).. 
名 称 (N): 。 自 定 
渐变 类 型 (T):; 实 底 了 E 
平滑 度 (M): 100 ，|% mm 肖 
正常 :| 不 后 明度 : 


所 .四 @. 白 辐 客 


14-30 ”设置 渐变 色 14-31 填充 线性 渐变 


按 CtrltD 组 合 键 ， 取 消 选区 ， 如 图 14-32 所 示 。 

pg 剖 汪 07| 选择 工具 箱 中 的 矩形 选 框 工具 ， 绘 制 一 个 矩形 选区 ， 如 图 14-33 所 示 。 

选择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 
弹出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐 变色 ，RGB 参数 值 分 别 为 (31、136、217) 和 (4、147、 
215)， 设 置 效 果 如 图 14-34 所 示 。 


单 击 “ 确 定 ” 按 钮 ， 新 建 “ 图 层 3” 图 层 ， 从 上 至 下 为 选区 填充 线性 渐变 ， 如 
图 14-35 所 示 。 
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14-33 ”经 制 和 矩形 选区 


名 称 (N): ” 自 定 


渐变 类 型 (T): 实 底 ~ 


平滑 度 (M): % 


色 标 
不 透明 度 :| |，|% 位置 [ ]w [ 册 和 (D) ] 
颜色 :| >| 位 置 :| |% 删除 (D) | 


图 14-34 设置 渐变 色 图 14-35 填充 线性 渐变 

按 CtrltD 组 合 键 ， 取 消 选区 ， 如 图 14-36 所 示 。 

双击 “图 层 3” 图 层 , 弹出 “图 层 样 式 ” 对 话 框 , 勾 选 “投影 ” 复 选 框 , 设置 “ 角 
度 ” 为 90 度 、“ 距 离 ” 为 1 像素 、“ 大 小 ”为 5 像素， 如 图 14-37 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 “投影 ”图 层 样 式 ， 如 图 14-38 所 示 。 

新 建 “ 图 层 4” 图 层 ， 设 置 前 景色 为 白色 ， 选 择 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 
工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”、“ 半 径 ” 为 8 像素 ,绘制 一 个 圆 角 甜 形 ， 
如 图 14-39 所 示 。 

设置 “图 层 4” 图 层 的 “不 透明 度 ” 为 60%， 即 可 改变 图 像 效果 ， 如 图 14-40 
所 示 。 
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图 14-37 设置 “投影 ”图 层 样 式 


图 14-38 应 用 “投影 ”图 层 样 式 效 果 图 14-39 绘制 圆 角 和 矩形 


办 在 .加 CC. 和 辣 司 辣 4 


图 14-40 ”设置 “不 透明 度 ” 后 的 图 像 效 果 
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14.2.2 免费 WiFi 应 用 登录 界面 的 表单 按钮 设计 | 


下 面 主 要 使 用 贺 角 和 矩形 工具 、 渐 变 工具 、 图 层 样 式 及 自 定形 状 工具 等 ， 制 作 免 费 WiFi 应 
用 登录 界面 的 表单 按钮 效果 。 

新 建 “ 图 层 5” 图 层 , 选择 工具 箱 中 的 圆 角 和 矩形 工具 , 在 工具 属性 栏 中 设置 “ 选 
择 工具 模式 ”为 “路 径 ”、“ 半 径 ” 为 20 像素 ,绘制 一 个 圆 角 矩形 路 径 ， 如 图 14-41 所 示 。 

展开 “属性 ”面板 ,设置 W 为 758 像素 、 旦 为 100 像素 ， 如 图 14-42 所 示 。 


图 14-41 绘制 一 个 圆 角 和 矩 形 路 径 图 14-42 设置 参数 


按 Ctl+Enter 组 合 键 ， 将 路 径 转 变 为 选区 ， 如 图 14-43 所 示 。 

选择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 弹 
出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐 变色 ，RGB 参数 值 分 别 为 (54、169、242) 和 (49、134、 
213)， 如 图 14-44 所 示 。 


位 置 ; % 史 祭 (D) | 
ne: MD] aco: Wi % CMa) 


图 14-43 ”将 路 径 转 换 为 选区 图 14-44 ”设置 渐变 色 
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古河 05| 单 击 “ 确 定 ” 按 钮 ， 为 选区 填充 线性 渐变 ， 如 图 14-45 所 示 。 
pg 如 06| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 14-46 所 示 ， 将 其 作为 按钮 。 


ERA EE 
"eee ;| 
司 | 儿 。 

四 筷 
中 
间 
引 

加 


ee ee 
IE 本 BE 
E 性 
次 


图 14-45 ”填充 线性 渐变 图 14-46 取消 选区 


二 07| 复制 “图 层 5” 图 层 ， 得 到 “图 层 5 拷贝 ”图 层 ， 如 图 14-47 所 示 。 
2 天河 08| 将 副本 图 层 中 的 图 像 移动 至 合适 位 置 ， 如 图 14-48 所 示 。 
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14-48 ”调整 图 像 的 位 置 


图 14-47 ” 调 出 变换 控制 框 
2 证 河 09| 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 如 图 14-49 所 示 。 
步 桑 适当 调整 图 像 的 大 小 和 位 置 ， 如 图 14-50 所 示 。 


于 是 11| 按 Enter 键 ， 确 认 变换 操作 ， 效 果 如 图 14-51 所 示 。 
2 去; 洒 12| 按 住 Ctrl 键 ， 单 击 “ 图 层 $ 拷贝 ”图 层 的 图 层 缩 览 图 ， 新 建 选区 ， 如 图 14-52 


所 未。 
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图 14-49 苦 出 变换 控制 杠 14-50 调整 图 像 的 大 小 和 位 置 
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图 14-51 确认 变换 操作 14-52 新建 选 区 

选择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “点 按 可 编辑 渐变 ”按钮 ， 弹 
出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐变 色 ，RGB 参数 值 分 别 为 (177、177、177) 和 (123、123、 
123)， 设 置 效 果 如 图 14-53 所 示 。 

单 击 “确定 ” 按 钮 ， 为 选区 填充 线性 渐变 ， 如 图 14-54 所 示 。 

按 CtrltD 组 合 键 ， 取 消 选区 ， 如 图 14-55 所 示 。 

双击 “图 层 $ 拷贝 ”图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 勾 选 “ 描 边 ” 复 选 框 ， 
设置 “大 小 ”为 3 像素 、“ 颜 色 ” 为 灰色 (RGB 参数 值 均 为 208)， 如 图 14-56 所 示 。 
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| 位 置 :| |j% [WF(D0) _] 
着色 : OP 人 os: Wi % 量 除 (D) _] 


图 14-53 ”设置 渐变 色 


图 14-55 ”取消 选区 图 14-56 设置 “ 描 边 ”图 层 样式 


去; 党 17| 在 “图 层 样 式 ” 对 话 框 中 色 选 “投影 ” 复 选 框 ， 保 持 默认 设置 即 可 ， 如 
图 14-57 所 示 。 

天 河 18| 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样 式 ， 如 图 14-58 所 示 。 

天 河 19| 复制 “图 层 5 拷贝 ”图 层 ， 得 到 “图 层 5 拷贝 2” 图 层 ， 如 图 14-59 所 示 。 

二 20| 将 “图 层 5 拷贝 2” 图 层 中 的 图 像 移 动 至 合适 位 置 ， 如 图 14-60 所 示 。 

区 上 中 21 按 住 Ctrl 键 ， 单 击 “ 图 层 5 拷贝 2” 图 层 的 图 层 缩 览 图 ， 将 其 载 入 选区， 如 
图 14-61 所 示 。 

2 天河 22| 选择 工具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 中 单 击 “点 按 可 编辑 渐变 ”按钮 ， 弹 
出 “渐变 编辑 器 ”对 话 框 ， 设 置 渐变 色 ，RGB 参数 值 分 别 为 (240、240、240) 和 (219、223、 
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226)， 设 置 效 果 如 图 14-62 所 示 。 


14-57 ”人 勾 选 “投影 ” 复 选 框 


图 14-59 复制 图 层 
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图 14-61 载 入 选区 图 14-62 设置 渐变 色 
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二 23| 单 击 “ 确 定 ”按钮 ， 为 选区 填充 线性 渐变 ， 如 图 14-63 所 示 。 
未 ; 洒 24| 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 14-64 所 示 。 


图 14-63 ”填充 线性 渐变 图 14-64 取消 选区 
新 建 “ 图 层 6” 图 层 ， 设 置 前 景色 为 白色 ， 选 择 工具 箱 中 的 圆 角 矩形 工具 ， 在 
工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”、“ 半 径 ” 为 8 像素 ， 绘 制 一 个 圆 角 矩形 ， 
如 图 14-63 所 示 。 
双击 “图 层 6” 图 层 , 弹出 “图 层 样式 ”对 话 框 ， 勾 选 “ 描 边 ” 复 选 框 , 设置 “大 
小 ”为 3 像素 、“ 颜 色 ” 为 灰色 (RGB 参数 值 均 为 198)， 如 图 14-66 所 示 。 


图 14-65 经 制 圆 角 甜 形 图 14-66 设置“ 描 边 ” 图 层 样式 


不 ; 洒 27| 勾 选 “内 阴影 ” 复 选 框 ， 设 置 “距离 ”为 1 像素 ， 如 图 14-67 所 示 。 
过 司 28| 单 击 “确定 ”按钮 ， 即 可 应 用 图 层 样式 ， 如 图 14-68 所 示 。 
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新 建 样式 LW 
团 预 瞧 (V) 


重度: (| ) 56。 度 加 使 用 全 局 光 G 
阳 讲 (C0): (一 一 | % 
大 小 (5): [mt 像 索 


图 14-67 设置 “内 阴影 ”图 层 样式 图 14-68 应 用 图 层 样 式 效果 
复制 “图 层 6” 图 层 ， 得 到 “图 层 6 拷贝 ”图 层 ， 将 副本 图 层 中 的 图 像 移动 至 
合适 位 置 ， 如 图 14-69 所 示 。 
选择 “图 层 5 拷贝 ”图 层 ， 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “拷贝 图 
层 样式 ”命令 , 选择 “图 层 5” 图 层 , 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “粘贴 图 层 样式 ” 
命令 ， 粘 贴图 层 样式 ， 效 果 如 图 14-70 所 示 。 


图 14-69 复制 图 层 并 调整 图 像 位 置 图 14-70 ”粘贴 图 层 样 式 


新 建 “ 图 层 7” 图 层 ， 设 置 前 景色 为 灰色 (RGB 参数 值 均 为 214)， 在 工具 箱 中 
选择 圆 角 和 拢 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”、“ 半 径 ” 为 8 像素 ， 
绘制 一 个 圆 角 和 矩形， 如 图 14-71 所 示 。 

双击 “图 层 7” 图 层 , 弹出 “图 层 样 式 ” 对 话 框 , 勾 选 “ 描 边 ” 复 选 框 , 设置 “大 
小 ”为 1 像素 、“ 颜 色 ” 为 灰色 (RGB 参数 值 均 为 100)， 如 图 14-72 所 示 。 
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图 14-71 


绘制 圆 角 甜 形 


图 14-72 设置 “ 描 边 ”图 层 样式 
古河 33| 色 选 “投影 ” 复 选 框 , 取消 勾 选 “使 用 全 局 光 ” 复 选 框 , 设置 “角度 ”为 120 度 、 
“距离 ”为 2 像素 、 


“扩展 ”为 0、“ 大 小 ”为 10 像素 ， 如 图 14-73 所 示 。 
天河 34| 单 击 “确定 ”按钮 ， 即 可 应 用 图 层 样 式 ， 如 图 14-74 所 示 。 


混合 模式 (6): 正片 琶 底 | 
不 透明 度 (D) p= 75 % 


角度 (A): ® 120 一度 门 使 用 全 局 (6) 


距离 (D): = ， 像素 
扩展 R): CG 一 0 区 
大 小 (S): Ye 0 像素 


二 


杂 色 N: (一 = 0 


% 


可 图 层 控 空 投影 (J) 


图 14-73 设置 “投影 ”图 层 样式 图 14-74 ”应 用 图 层 样式 效果 
pe 妇 35| 选择 自 定形 状 工 具 ， 设 置 “ 选 择 工 具 模 式 ” 为 “像素 ”， 展 开 “ 形 状 ” 下 拉 列 
表 框 ， 选 择 “ 复 选 标记 ”形状 ， 如 图 14-75 所 示 。 


gm 36| 设置 前 景色 为 蓝 色 (RGB 参数 值 为 38、156、235)， 新 建 “ 图 层 8” 图 层 ， 在 
合适 位 置 绘制 一 个 蓝 色 复 选 标记 ， 如 图 14-76 所 示 。 
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图 14-75 ”设置 自 定 义 形 状 14-76 绘制 蓝 色 复 选 标记 
分 别 复制 “图 层 7”“ 图 层 8” 图 层 , 得 到 “图 层 7 拷贝 ”“ 图 层 8 拷贝 ”图 层 ， 
使 用 移动 工具 将 副本 图 层 中 的 图 像 适当 移动 至 合适 位 置 ， 如 图 14-77 所 示 。 
选择 “图 层 8 拷贝 ”图 层 ， 按 住 Ctrl 键 ， 单 击 图 层 缩 览 图 ， 将 其 载 入 选区 ， 设 
置 前 景色 为 灰色 (RGB 参数 值 均 为 202)， 按 Alt+tDelete 组 合 键 填充 前 景色 ， 然 后 取消 选区 ， 
如 图 14-78 所 示 。 
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图 14-77 复制 图 层 并 调整 标记 位 置 图 14-78 填充 选区 并 取消 选区 


14.2.3 免费 WiFi 应 用 登录 界面 的 细节 和 文本 设计 oD| 


下 面 主要 通过 复制 图 像 ， 以 及 为 登录 界面 添加 手机 状态 栏 、 登 录 框 小 部 件 图 标 、WiFi 图 
标 等 操作 ， 制 作 免 费 WiFi 应 用 登录 界面 的 细节 效果 ， 然 后 使 用 横 排 文字 工具 、“ 字 符 ” 面 板 
及 素材 图 像 等 ， 制 作 免 费 WiFi 应 用 登录 界面 的 文字 效果 。 
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2 芝 淹 01| 打开 “免费 WiFi 应 用 状态 栏 . psd” 素材 图 像 ， 将 其 拖 虹 至 “免费 WiFi 应 用 登 
录 界 面 ”图 像 编 辑 窗口 中 的 合适 位 置 处 ， 如 图 14-79 所 示 。 


这 浏 02| 复制 “图 层 5” 图 层 ， 得 到 “图 层 5 拷贝 3” 图 层 ， 如 图 14-80 所 示 。 
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图 14-79 ” 拖 入 素材 图 像 图 14-80 复制 图 层 


2 古河 03| 适当 调整 “图 层 5 拷贝 3” 图 层 中 图 像 的 大 小 和 位 置 ， 如 图 14-81 所 示 。 
2 开 湖 04| 在 “图 层 5 拷贝 3” 图 层 的 图 层 样式 列表 中 ， 隐 藏 “投影 ”图 层 样 式 ， 如 


图 14-81 调整 图 像 的 大 小 和 位 置 图 14-82 ”隐藏 “ 投 


影 ”图 层 样 式 
型 河 05| 打开 “小 部 件 .psd” 素 材 图 像 ， 将 其 拖 电 至 “免费 WiFi 应 用 登录 界面 ”图 像 
编辑 窗口 中 的 合适 位 置 处 ， 如 图 14-83 所 示 。 


打开 “WiFi 图 标 .psd” 素 材 图 像 ， 将 其 拖 电 至 “免费 WiFi 应 用 登录 界面 ”图 
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像 编辑 窗口 中 的 合适 位 置 处 ， 如 图 14-84 所 示 。 


全 
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图 14-83 拖 入 素材 图 像 图 14-84 拖 入 素材 图 像 
2 天河 07 | 使 用 横 排 文字 工具 输入 相应 的 文本 , 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 方 
正 粗 宋 简 体 ”“ 字 体 大 小 ”为 100 点 、“ 字 距 调 整 ”为 100、“ 颜 色 ” 为 墨色， 文字 效果 如 
图 14-85 所 示 。 
济 漠 08| 双击 文字 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 勾 选 “ 描 边 ” 复 选 框 ,设置 “大 小 ” 
为 1 像素 、“ 颜 色 ” 为 红色 (RGB 参数 值 为 255、0、0)， 如 图 14-86 所 示 。 


14-85 输入 文本 图 14-86 设置 “ 描 边 ”图 层 样式 


这 河 09| 勾 选 “渐变 到 加 ” 复 选 框 , 设置 “渐变 ”为 “ 检 、 黄 、 禁 渐变 ”, 如 图 14-87 所 示 。 
be 对 沼 10| 单 击 “确定 ”按钮 ， 为 文字 应 用 图 层 样式 ， 如 图 14-88 所 示 。 
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图 14-87 设置 “渐变 全 加 ”图 层 样式 图 14-88 应 用 图 层 样式 效果 


pg 对 当 11| 打开 “文案 psd” 素 材 图 像 ， 将 其 拖 电 至 当前 编辑 窗口 中 的 合适 位 置 处 ， 最 终 
效果 如 图 14-89 所 示 ; 用 户 根据 需要 设计 出 其 他 颜色 效果 ， 如 图 14-90 所 示 。 


N 


免费 WiFi 


| UD 请 输入 您 的 手机 号 码 


图 14-89 最 终 效 有 果 图 14-90 ”扩展 效果 
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在 设计 影音 游戏 类 移动 APP UI 时 ， 需 要 注意 应 用 程序 各 元 素 的 摆 放 。 本 
章 将 通过 视频 播放 APP 界面 设计 、 游 戏 APP 界面 设计 等 实例 ， 讲 解 影音 游戏 类 
APP UI 的 制作 方法 。 


本 章 重 点 导航 


视频 播放 APP 界面 的 主体 效 @ 休 闲 游 戏 界 面 的 背景 效果 
果 设 计 设计 

@ 视频 播放 APP 界面 的 细节 效 。 @ 休闲 游戏 界面 的 主体 效果 设计 
果 设 计 休闲 游戏 界面 的 文本 效果 设计 
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15.1 ”视频 播放 : 掌握 视频 播放 APP 界面 的 设计 
随 着 智能 手机 、 平 板 电脑 的 出 现 ， 视 频 软 件 得 到 迅猛 发 展 。 视 频 软 件 的 播放 功能 是 一 


般 使 用 者 最 第 用 的 功能 之 一 。 本 实例 主要 介绍 视频 播放 APP UI 的 设计 方法 ， 最 终 效果 如 图 
15-1 所 示 。 


15. 1.2 内 容 
请 扫 二 维 码 


请 扫 二 维 码 


15.1.1 视频 播放 APP 界面 的 主体 效果 设计 | 


下 面 主要 使 用 和 矩形 选 框 工具 、 贺 角 和 矩形 工具 等 ， 制 作 视 频 播放 APP 界面 的 主体 效果 。 

选择 “文件 ”|“ 打 开 ” 命 令 ， 打开“ 视频 界面 背景 jpg” 素 材 图 像 ， 如 图 15-2 
所 示 。 

在 “图 层 ” 面 板 中 ,新建 “图 层 1” 图 层 ， 选 择 工具 箱 中 的 矩形 选 框 工具 ， 绘 
制 一 个 矩形 选区 ， 如 图 15-3 所 示 。 

3 03| 设置 前 景色 为 黑色 ， 按 AlttDelete 组 合 键 为 选区 填充 前 景色 ， 然 后 取消 选区 ， 
效果 如 图 15-4 所 示 。 

设置 “图 层 1” 图 层 的 “不 透明 度 ” 为 60%， 效 果 如 图 15-5 所 示 。 

新 建 “ 图 层 2” 图 层 ， 选 择 工具 箱 中 的 矩形 选 框 工具 ， 绘 制 一 个 矩形 选区 ， 如 
图 15-6 所 示 。 

按 AlttDelete 组 合 键 为 选区 填充 前 景色 ,然后 取消 选区 ,设置 “图 层 2” 图 层 的 “不 
透明 度 ” 为 60%， 效 果 如 图 15-7 所 示 。 
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在 “图 层 面板 中 ， 图 层 “ 填 充 参数 与 “不 透明 度 ” 参 数 ， 两 者 在 一 定 程度 上 来 
讲 ， Mohr 当 数 值 为 100 时 ， 完 全 不 透明 ; 当 数 值 为 50 时 ， 为 半 透 
明 ; 数值 为 0 时 ， 完 全 透明 。 “不 透明 度 ” 参 数 与 “填充 ， 参 数 的 区 别 在 于 ， “不 透明 
度 参数 控制 着 整个 图 层 的 连 明 属性 . 包括 图 层 中 的 形状 、 像 素 及 图 层 样 式 ; 而 “填充 
参数 只 影响 图 层 中 绘制 的 像素 和 形状 的 不 透明 度 。 


图 15-2 打开 素材 图 像 图 15-3 绘制 矩形 选区 


图 15-4 填充 前 景色 并 取消 选区 15-5 设置 图 层 “ 不 透明 度 ” 的 效果 


07| 打开 “视频 播放 APP 状态 栏 psd” 素材 图 像 ， 使 用 移动 工具 将 其 拖 中 至 “ 视 
频 界面 背景 景 ” hae 适 位 置 处 ， 效 末 如 图 15-8 所 示 。 


上 子弹 08| 新 建 “ 图 层 3” 图 层 , 选择 工具 箱 中 的 圆 角 矩形 工具 , 在 工具 属性 栏 中 设置 “ 选 
择 工 具 模式 ” 为 “像素 ”、“ 半 和 人 径 ”为 25 像素 , 绘制 一 个 黑色 的 圆 角 和 矩形, 效果 如 图 15-9 所 示 。 
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下 面 主要 使 用 矩形 工具 、 椭 圆 工 具 、 椭 圆 选 框 工具 等 ， 制 作 视 频 播放 APP 界面 的 细 
方 效 霖 。 
打开 “万 能 播 .psd” 素 材 图 像 ， 使 用 移动 工具 将 其 拖 虹 至“ 视频 界面 背景 ”图 
像 编 辑 窗口 中 的 合适 位 置 处 ， 效 果 如 图 15-10 所 示 。 
新 建 “ 图 层 4” 图 层 ， 设 置 前 景色 为 灰色 (RGB 参数 值 均 为 180)， 选 择 工具 箱 
中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 绘 制 一 个 长 条 矩形 ， 效 
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采 如 图 15-11 所 示 。 


新 建 “ 图 层 5” 图 层 ， 设置 前 景色 为 监 色 (RGB 参数 值 分 别 为 40、137、211)， 
选择 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 绘 制 一 个 长 
条 矩形， 效果 如 图 15-12 所 示 。 

新 建 “ 图 层 6” 图 层 ， 设置 前 景色 为 痰 监 色 (RGB 参数 值 分 别 为 177、 
209)， 选 择 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”， 绘 肯 
一 个 椭圆 形 ， 效 果 如 图 15-13 所 示 。 
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使 用 椭圆 选 框 工具 在 图 像 编 辑 窗口 中 创建 一 个 椭圆 选区 ， 如 图 15-14 所 示 。 
按 Delete 键 删除 选区 内 的 部 分 ， 然 后 取消 选区 ， 效 果 如 图 15-15 所 示 。 


打开 “视频 播放 控制 按钮 psd ”素材 图 像 ， 使 用 移动 工具 将 其 拖 卡 至 “视频 界 
面 背 景 ”图 像 编辑 窗口 中 的 合适 位 置 处 ， 效 果 如 图 15-16 所 示 。 

打开 “文字 1.psd ”素材 图 像 ， 使 用 移动 工具 将 其 拖 由 至 “视频 界面 背景 ”图 
像 编辑 窗口 中 的 合适 位 置 处 ， 最 终 效果 如 图 15-17 所 示 。 
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15.2， 休闲 游戏 : 掌握 休闲 游戏 APP 界面 的 设计 


游戏 UI 设计 早已 经 红 透 半边 天 ， 更 多 用 户 关 心 的 主要 问题 是 能 人 否 比 较 容 易 和 舒适 地 玩 游 
戏 。 人 们 的 着 眼 点 在 于 游戏 的 趣味 性 和 美观 性 , 而 趣味 性 与 美观 性 主要 取决 于 游戏 UI 的 优 劣 。 
本 市 主要 介绍 水 果 超 人 游戏 APP UI 的 设计 方法 。 最 终 效 果 如 图 15-18 所 示 。 


15-18 ”实例 效果 


15. 2. 1 内 容 15. 2. 2 内 容 15. 2. 3 内 容 
请 扫 二 维 码 请 扫 二 维 码 请 扫 二 维 码 
15.2.1 休闲 游戏 界面 的 背景 效果 设计 OD 


随 着 科技 的 发 展 ， 手 机 的 功能 越 来 越 多 ， 也 越 来 越 强 大 。 如 今 ， 手 机 游戏 已 发 展 到 可 以 
和 掌上 游戏 机 媲美 、 具 有 很 强 的 娱乐 性 和 交互 性 的 复杂 形态 了 。 本 节 以 一 款 热门 的 简单 休闲 
游戏 一 一 “水 果 超 人 ”为 例 ， 介 绍 手机 游戏 APP 界面 的 设计 方法 。 

制作 休闲 手机 游戏 APP 的 背景 ， 首 先 要 置 入 相应 的 背景 图 像 ， 通 过 色彩 和 色调 的 调整 ， 
使 其 更 加 艳丽 ， 然 后 加 入 相应 的 按钮 和 状态 栏 素材 。 

选择 “文件 ”|“ 打 开 ” 命 令 ， 打 开 素 材 图 像 “ 添 加 “背景 ”jpg”， 如 图 15-19 
所 示 。 
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p 台 当 02| 选择 “图 像 ”|“ 调 整 ”|“ 亮 度 / 对比度 ”命令 ,弹出 “亮度 /对 比 度 ”对 话 框 ， 
设置 “亮度 ”为 20、“ 对 比 度 ” 为 10， 如 图 15-20 所 示 。 


由 使 用 旧版 (L) 


图 15-19 打开 背景 素材 图 像 图 15-20 ”调整 “亮度 /对 比 度 ” 参 数 
二 可 03| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 亮度 和 对 比 度 ， 如 图 15-21 所 示 。 
pg 守 河 04| 选择 “图 像 ”1 “调整 "| “自然 饱和 度 ” 命令 , 弹出 “自然 饱和 度 ” 对 话 框 , 设置 “ 自 
然 饱 和 度 ” 为 50、“ 饱 和 度 ” 为 20， 如 图 15-22 所 示 。 


自然 饱和 度 (V): 


饱和 度 (5): 


图 15-21 调整 效果 图 15-22 调整 参数 
过 河 05| 单 击 “确定 ”按钮 ， 即 可 调整 图 像 的 饱和 度 ， 如 图 15-23 所 示 。 
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展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 如 图 15-24 所 示 。 


图 15-23 ”调整 效果 图 15-24 新建 图 层 


选择 工具 箱 中 的 多 边 形 套 索 工具 ， 创 建 一 个 多 边 形 选 区 ， 如 图 15-25 所 示 。 
设置 前 景色 为 黑色 , 按 AlttDelete 组 合 键 , 为 选区 填充 前 景色 , 如 图 15-26 所 示 。 


图 15-25 创建 选区 图 15-26 ”填充 且 腔 色 
按 CtrltD 组 合 键 ， 取 消 选 区 ， 设 置 “ 图 层 1” 图 层 的 “不 透明 度 ” 为 35%， 
即 可 改变 图 像 的 透明 效果 ， 如 图 15-27 所 示 。 


打开 “游戏 按钮 . psd” 素材 图 像 ， 将 其 拖 电 至 背景 图 像 编辑 窗口 中 的 合适 位 置 
处 ， 添 加 游戏 按钮 素材 效果 如 图 15-28 所 示 。 


6 D> 


有 甩 


Photoshop™ = 


移动 UI 设计 从 入 门 到 精通 ( 第 2 版 ) 


= 


在 “图 层 ” 面 板 中 ， 展 开 “ 游 戏 按钮 ”图 层 组 ， 分 别 设置 “按钮 背景 ”图 层 和 
“按钮 背景 1” 图 层 的 “不 透明 度 ” 为 60%， 如 图 15-29 所 示 。 

打开 “手机 状态 栏 . psd” 素材 图 像 ， 将 其 拖 电 至 背景 图 像 编 辑 窗口 中 的 合适 位 
置 处 ， 添 加 手机 状态 栏 素 材 效 果 如 图 15-30 所 示 。 


在 制作 休闲 游戏 APP 界面 的 主体 效果 时 ， 主 要 用 到 了 打开 并 拖 入 素材 图 像 、 绘 制 椭圆 区 
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等 操作 。 

二 ;党 01| 打开 “西瓜 psd” 素材 图 像 ， 将 其 拖 电 至 背景 图 像 编 辑 窗口 中 的 合适 位 置 处 ， 
添加 西瓜 游戏 素材 效果 如 图 15-31 所 示 。 

到 汪 02| 选择 “图 层 1” 图 层 ， 新 建 “ 图 层 3” 图 层 ， 如 图 15-32 所 示 。 


PB :| 加 DIDR 日 


图 15-31 添加 素材 图 像 图 15-32 ”新建 图 层 


运河 03| 选择 工具 箱 中 的 椭圆 选 框 工具 ， 绘 制 一 个 椭圆 选区 ， 如 图 15-33 所 示 。 
本 到 04| 设置 前 景色 为 绿色 (RGB 参数 值 为 145、194、8)， 按 AlttDelete 组 合 键 ， 为 选 
区 填充 前 景色 ， 然 后 取消 选区 ， 如 图 15-34 所 示 。 


图 15-33 ”绘制 椭圆 选区 图 15-34 ”填充 前 景色 并 取消 选区 
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设置 “图 层 3” 图 层 的 “不 透明 度 ” 为 50%， 如 图 15-35 所 示 。 
在 “图 层 3” 图 层 的 上 方 新 建 “ 图 层 4” 图 层 ,使 用 椭圆 选 框 工具 绘制 一 个 椭 
圆 选 区 ， 如 图 19-36 所 示 。 


~ 


CEA ENEEE 


选择 “编辑 ”|“ 描 边 ” 命 令 , 弹出 “ 描 边 ”对 话 框 ,设置 “宽度 ”为 “20 像素 ”、 
“颜色 ”为 绿色 (RGB 参数 值 为 145、194、8)， 如 图 15-37 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 为 选区 描 边 ， 如 图 15-38 所 示 。 


摘 边 
宽度 (W): 西 王 习 


ie: 国 国 


位 置 
ma 加 居中 (OO 名 居 》MU) 


混合 
模式 (M): 正常 
不 透明 度 (0): 100  % 
问 保留 透明 区 域 (p) 


按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 15-39 所 示 。 
在 “图 层 ” 面 板 中 ,设置 “图 层 4” 图 层 的 不 透明 度 为 50%， 如 图 15-40 所 示 。 
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图 15-39 ”取消 选区 图 15-40 ”设置 图 层 “ 不 透明 度 ” 的 效果 
15.2.3 ”休闲 游戏 界面 的 文本 效果 设计 DO 
下 面 主要 使 用 横 排 文字 工具 、“ 文 字 变 形 ” 命 令 及 各 种 图 层 样式 等 ， 制 作 休 闲 游 戏 APP 
界面 的 文本 效 采 。 


在 工具 箱 中 选择 横 排 文字 工具 ， 在 图 像 中 单 击 鼠 标 左 键 以 确认 插入 点 ， 在 “ 字 
符 ” 面 板 中 设置 “字体 系列 ”为 “ 华 康 海报 体 ”、“ 字 体 大 小 ”为 “68 点 ”、“ 颜 色 ” 为 绿 
色 (RGB 参数 值 为 145、194、8)， 输 入 文本 并 将 其 移 至 合适 位 置 ， 如 图 15-41 所 示 。 

双击 该 文本 图 层 ， 在 弹出 的 “图 层 样式 ”对 话 框 中 勾 选 “ 描 边 ” 复 选 框 ， 设 置 

“大 小 ”为 6 像素 、“ 颜 色 ” 为 白色 ， 如 图 15-42 所 示 。 


| 取消 


新 建 样式 (W).. 
习 祯 鉴 (V) 


混合 模式 人): 正常 

不 下 明度 (D; 
填充 类 型 FF): 颜色 v 
颜色 : 


EF 
fieRdAaTlw 
| 旭 因 贡 梧 ”< | aa | 平 者 


| 正常 
: 图 


设置 为 默认 值 复位 为 默认 值 


图 15-41 设置 文字 属性 并 输入 文本 图 15-42 设置 “ 描 边 ” 图 层 样 式 


De 
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勾 选 渐变 登 加 ” 复 选 框 , 设置 “渐变 ”颜色 为 绿色 (RGB 参数 值 为 91、190、 1) 
到 浅 绿色 (RGB 参数 值 为 216、243、3)， 如 图 15-43 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 图 层 样式 ， 如 图 15-44 所 示 。 


新 朗 


_ | 
混合 模式 (0): 正常 ”回信 色 | Mo 


] 
i 日 ER | | 四 
样式 人 )j: 线性 v 同 与 图 层 对 齐 亿 


角度 0v): (4) 30 一度 ] 一 


纺 族 (6): J 100 晃 


复位 为 默认 值 


打开 “梨子 橙子 psd ”素材 图 像 ， 将 其 拖 电 至 背景 图 像 编辑 窗口 中 的 合适 位 置 
处 ， 制 作 其 他 的 游戏 按钮 素材 效果 如 图 15-45 所 示 。 


选择 横 排 文字 工具 ， 在 图 像 中 单 击 鼠 标 左 键 以 确认 插入 点 ， 设 置 “字体 系 
列 ” 为 “ 华 康 海 报 体 ”、“ 字 体 大 小 ”为 “160 点 ” 


、 “颜色 ”为 深 灰 色 (RGB 参数 值 均 为 
141)， 输 入 文本 并 将 其 移 至 合适 位 置 ， 如 图 15-46 所 示 。 


fe HAaTl% 
医 - 
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5 潮 07| 选择 “水 采 超 人 ”文本 图 层 , 选择 “类 型 ”| 文字 变形 命令 , 弹出 “变形 文字 ” 
对 话 框 ， 设 置 “ 样 式 ” 为 “上 弧 ”， 如 图 15-47 所 示 。 
2 古河 08| 单 击 “ 确 定 ”按钮 ， 即 可 应 用 变形 文字 效果 ， 如 图 15-48 所 示 。 


水平 (H) 名 重 直 (V) 
弯曲 (B): 
Pr 
水 平 扭曲 (D): 
人 


垂直 扭曲 (E): 


图 15-47 “变形 文字 ”对 话 框 15-48 ”应 用 变形 文字 效果 


p 建 汝 09| 双击 “水 果 超 人 ”文本 图 层 ， 在 弹出 的 “图 层 样 式 ”对 话 框 中 勾 选 “ 描 边 ” 复 
选 框 ,设置 “大 小 ”为 10 像素 、“ 颜 色 ” 为 白色 ， 如 图 15-49 所 示 。 


pg 如 当 10| 勾 选 “内 阴影 ” 复 选 框 ， 设置 “距离 ”为 5 像素 、“ 阻 塞 ” 为 0、“ 大 小 ”为 
5 像素 ， 如 图 15-50 所 示 。 


Ee i 
结构 | Ps S| 结构 | ] 
[| 
大 小 一 国贸 素 混合 模式 人 )。 正片 要 底 ~ 国 玫 | 
位 置 P): 外 部 ~ 下 不 着 明 度 O) 一 J 一 一 % | 
混合 模式 人 @); 正常 Y 角度 (a): (SN 2 NE 也 SC(V) 
| 填充 类 型 F): 颜色 ”> 0 阻塞 (C): 一 0 % 
声色 : | 四 - | 大 /5S): 一 ——— 5 像素 
品质 


wa | 1| 国 E 
杂 色 (N): 4 sD 0 


CEE . Er 


图 15-49 设置 “ 描 边 ”图 层 样式 图 15-50 设置 “内 阴影 ”图 层 样式 


一 浏 11| 勾 选 “渐变 又 加 ” 复 选 框 ， 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 弹 出 “渐变 编辑 器 ” 
对 话 框 ， 在 “ 预 设 ” 列 表 框 中 选择 相应 的 渐变 色 详 ， 如 图 15-51 所 示 。 
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i 当 12| 单 击 “确定 ”按钮 ， 返 回 “ 图 层 样式 ”对 话 框 ， 即 可 改变 渐变 色 效 果 ， 如 
图 15-52 所 示 。 

二 13| 勾 选 “投影 ” 复 选 框 ， 设置 “角度 ”为 120 度 、“ 距 离 ” 为 19 像素 、“ 扩 展 ” 
为 19%、“ 大 小 ”为 5 像素， 如 图 15-53 所 示 。 

i 当 14| 单 击 “确定 ”按钮 ， 即 可 应 用 图 层 样 式 ， 如 图 15-54 所 示 。 


一 淖 秋 加 
| 一 着- 


混合 模式 (0): 正常 回 仿 色 
不 遂 明 朗 P， 一 Ta % 国医 一 TEXTR 


"== DRaw | 口 Hk) 


样式 Q): 线性 v 贱 与 图 层 对 六 人) | 

角度 Nj:( |) 9 度 | 贺 
4 

稍 旗 G) 7 一 一 100 % 


夏 位 为 财 认 什 


量 除 (D) | 
| 喇 除 (D) | 


图 15-51 选择 渐变 色谱 图 15-52 设置 “渐变 全 加 ”图 层 样式 


投影 
or | 结构 - 
温 合 避 式 B)， 正片 又 斌 -En 
不 如 明度 (0): 一 Yj 一 75 % 新 媚 样 式 (W)..。 
后 DH) 
角度 (A: () 120 度 团 信用 全 局 光 (6) 
距离 D): 7 一 一 19 像素 疾 
扩展 (R): 7 1 又 
大 小 (5): [a 5 像素 
品质 
at: | -| 口 jhia 上 0) 
杂 色 (N): a) % 


财 图 必 控 空投 影 W) 


om | > 
9 六 加 O. 和 白 略 会 i 


图 15-53 ”设置 “投影 ”图 层 样式 图 15-54 应 用 图 层 样式 效果 


2 到 说 15| 新 建 “ 自 然 饱 和 度 1” 调 整 图 层 ， 展 开 “ 属 性 ”面板 ， 设置“ 自然 饱和 度 ” 为 
20， 最 终 效 采 如 图 15-55 所 示 。 
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15-55 “最终 效果 
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学习 提示 


在 设计 媒体 平台 类 APP UI 时 ， 需 要 注意 界面 中 各 元 素 的 摆 放 及 协调 关系 。 
本 章 将 通过 制作 豆 办 APP 书店 UI、 婚 纱 摄影 小 程序 UI 等 实例 ， 为 读者 讲解 媒 
体 平 台 类 UI 的 设计 方法 。 


本 章 重 点 导航 


@ 制作 豆 闪 书店 页 面 广告 主体 效果 

@ 制作 豆 闪 书店 页 面 广告 文字 效果 

@ 制作 婚纱 摄影 小 程序 彩色 导航 柱 
@ 制作 婚纱 摄影 小 程序 服务 中 心 效 果 
@ 制作 婚纱 摄影 小 程序 首页 广告 效果 


长 沙 微微 映像 婚纱 摄影 © 
Ey WEI WEI YING XIANG 入 


b “ 微 | 微 1 映像 
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Photoshop™— 一 = >>>>> 
和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 
16.1 豆瓣 设计 : 书店 页 面 广告 设计 
在 制作 豆 准 平台 的 文章 页 面 广告 时 ， 首 先 打 开 并 拖 电 素 材 图 像 ， 调 整 图 像 的 亮度 ， 输 入 


相应 的 商品 信息 ， 然 后 再 将 图 像 拖 眼 至 豆 辩 界面 中 ， 即 可 完成 设计 。 
本 实例 最 终 效果 如 图 16-1 所 示 。 


《 ”豆瓣 书店 < 


16.1.1 制作 豆瓣 书 店 页 面 广 告 主体 效果 | 


下 面 介 绍 制作 豆 辩 书店 页 面 广告 主体 效果 的 方法 。 

按 Ctrl + O 组 合 键 ， 打 开 一 幅 素材 图 像 ， 效 果 如 图 16-2 所 示 。 

选择 “ 滤 镜 ”|“ 模 糊 ”|“ 高 斯 模糊 ”命令 ,弹出 “高 斯 模糊 ”对 话 框 , 设置 “ 半 
径 ” 为 1 像素 ， 如 图 16-3 所 示 。 

单 击 “ 确 定 ” 按 钮 ， 即 可 模糊 图 像 ， 效 果 如 图 16-4 所 示 。 

新 建 “ 亮 度 / 对 比 度 ” 调 整 图 层 ， 在 “属性 ”面板 中 设置 “亮度 ”为 28、“ 对 
比 度 ”为 5， 调整 背景 图 像 的 亮度 和 对 比 度 ， 效 果 如 图 16-5 所 示 。 

打开 “图 书 psd” 素 材 图 像 ， 运 用 移动 工具 将 其 拖 跨 至 当前 图 像 编 辑 窗 口中 的 
合适 位 置 处 ， 效 果 如 图 16-6 所 示 。 

双击 “图 层 1” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 参 数 
设置 如 图 16-7 所 示 。 
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Q 100% QQ@ 
半径 (R): [| 像素 


图 16-2 打开 素材 图 像 图 16-3 设置 “高 斯 模糊 ”选项 


图 16-4 ”模糊 图 像 


| 新建 样 式 (W).… | 
园 宫 (V) 
| 


图 16-6 添加 图 书 素材 图 16-7 设置 “投影 ”参数 
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和 移动 UI 设计 从 入 门 到 精通 (第 2 版 ) 
专家 指点 》) 


应 用 “模糊 滤 镜 ， 可 以 使 图 像 中 清晰 或 对 比 度 较 强 烈 的 区 域 产生 模糊 的 效果 。 


单 击 “ 确 定 ”按钮 ， 应 用 “投影 ”图 层 样式 ， 效 果 如 图 16-8 所 示 。 

选取 工具 箱 中 的 椭圆 选 框 工具 , 在 右 下 角 创 建 一 个 椭圆 选区 , 适当 调整 其 位 置 ， 
如 图 16-9 所 示 。 

新 建 “ 图 层 2” 图 层 ， 为 选区 填充 白色 ， 并 取消 选区 ， 如 图 16-10 所 示 。 

设置 “图 层 2” 图 层 的 “不 透明 度 ” 为 80%， 调 整 图 像 的 不 透明 度 ， 效 果 如 图 
16-11 所 示 。 


图 16-8 应 用 “投影 ”图 层 样式 图 16-9 创建 椭圆 选区 


图 16-10 填充 白色 图 16-11 调整 图 像 的 不 透明 度 


p 妇 汝 11| 为 “图 层 2” 图 层 添加 一 个 图 层 蒙 版 ， 运 用 渐变 工具 从 上 至 下 填充 黑色 至 白色 
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的 线性 渐变 ， 效 果 如 图 16-12 所 示 。 
a 台中 12 双击 “图 层 2” 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 选 中 “外 发 光 ” 复 选 框 ， 参 
数 设 置 如 图 16-13 所 示 。 


图 16-12 图像 效果 图 16-13 ”设置 “外 发 光 ” 参 数 


这 浏 13| 单 击 “确定 ”按钮 ， 应 用 “外 发 光 ” 图 层 样式 ， 效 果 如 图 16-14 所 示 。 
2 型 河 14| 按 Ctl+O 组 合 键 ， 打 开 “ 宣 传 文字 .psd” 素 材 图 像 ， 运 用 移动 工具 将 图 层 组 
的 图 像 拖 中 至 当前 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 16-15 所 示 。 


16-14 应 用 “外 发 光 ” 图 层 样式 16-15 添加 文字 素材 


16.1.2 ”制作 豆 斩 书店 页 面 广 告 文字 效果 电 


下 面 介 绍 制作 豆 辩 书店 页 面 广告 文字 效果 的 方法 。 

选取 工具 箱 中 的 直 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 
黄 草 简体 ”、“ 字 体 大 小 ”为 “15 点 ”、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -24、“ 颜 色 ” 为 
红色 (RGB 参数 值 分 别 为 237、23、98)， 并 激活 仿 粗 体 图 标 ， 如 图 16-16 所 示 。 

在 图 像 编辑 窗口 中 输入 相应 文字 ， 如 图 16-17 所 示 。 
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方正 黄 草 简体 | -| | - | -| 


| 


图 16-16 设置 字符 属性 图 16-17 输入 文字 (1) 


这 河 03| 双击 文字 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 选 中 “ 描 边 ” 复 选 框 ,设置 “颜色 ” 
为 白色 ， 其 他 参数 设置 如 图 16-18 所 示 。 
2 柬 河 04| 单 击 “ 确 定 ” 按 钮 ， 应 用 “ 描 边 ” 图 层 样式 ， 效 果 如 图 16-19 所 示 。 


图 16-18 设置 “ 描 边 ” 参 数 图 16-19 应 用 “ 描 边 ”图 层 样式 


抑 提 普通 图 层 中 的 指示 图 层 效 果 图 标 贺 , 可 以 将 图 层 样式 移动 到 另 一 图 层 。 使 用 缩 
放 效 果 ”命令 可 以 缩放 图 层 样 式 中 所 有 的 效果 ， 但 对 图 像 没 有 影响 。 

创建 图 层 样式 后 ， 可 以 将 其 转换 为 普通 图 层 ， 并 且 不 会 影响 图 像 整体 效果 。 在 效果 
图 层 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 图 层 ” 命令 ， 即 可 将 图 层 样 式 转 
换 为 普通 图 层 。 另 外 ,选择 “ 图 层 | “图 层 样式 | 创建 图 层 ” 命令， 同样 可 以 将 图 层 
样式 转换 为 图 层 。 
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05| 选取 工具 箱 中 的 圆 角 氟 形 工具 ， 在 工具 属性 栏 中 选择 工具 模式 为 “形状 ”， 设 
置 “半径 ? 15 像素 、“ 填 充 ” 为 红色 (RGB 参数 值 分 别 为 237、23、98)， 绘 制 一 个 圆 角 拓 
形 形 状 ， 如 图 16-20 所 示 。 

06| 选取 工具 箱 中 的 矩形 工具 , 在 工具 属性 栏 中 选择 工具 模式 为 “形状 ”, 设置 “ 填 
充 ” 为 红色 (RGB 参数 值 分 别 为 237、23、98)， 绘 制 一 个 矩形 形状 ， 如 图 16-21 所 示 。 


图 16-20 绘制 一 个 圆 角 甜 形 形状 16-21 经 制 和 矩形 形状 


一 让 复制 该 矩形 图 像 ， 并 适当 调整 其 位 置 ， 效 果 如 图 16-22 所 示 。 

.08| 选取 工具 箱 中 的 直 排 文字 工具 ， 输入 相应 文字 ， 在 “字符 ”面板 中 设置 “字体 
系列 为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 “5 点 ”、“ 设 置 所 选 字符 的 字 距 调整 ”为 200、“ 颜 
色 ” 为 白色 ， 效 果 如 图 16-23 所 示 。 


ee 


[ 200 种 ) 构图 解密 


ED 人 Ralf EL 作品 间 折 


图 16-22 ”复制 矩形 形状 16-23 ”输入 文字 (2) 


2 型 河 09| 选取 工具 箱 中 的 直线 工具 , 在 工具 属性 栏 中 选择 工具 模式 为 “形状 ”, 设置 “ 填 
充 ” 为 白色 、“ 粗 细 ” 为 3 像素 ,绘制 一 个 直线 形状 ， 效 果 如 图 16-24 所 示 。 
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步骤 选取 工具 箱 中 的 直 排 文字 工具 输入 相应 文字 ， 在 “字符 ”面板 中 设置 “字体 系 
列 ” 为 “方正 大 黑人 简体 ”、“ 字 体 大 小 ”为 “7 点” 
“颜色 ”为 白色 ， 效 果 如 图 16-25 所 示 。 


“设置 所 选 字 符 的 字 距 调整 ”为 200 


图 16-24 


绘制 直线 形状 图 16-25 输入 文字 (3) 
pp 妹 当 11 | 双击 文字 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 其 他 参数 设 
置 如 图 16-26 所 示 。 


pg 如 当 12| 单 击 “确定 ”按钮 ， 应 用 “投影 ”图 层 样 式 ， 效 果 如 图 16-27 所 示 。 
“方正 大 黑人 简体 "、 


9 辐 13] 选取 直 排 文字 工具 ， 输 入 相应 文字 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 
“字体 大 小 ”为 “3 点 ” 
图 16-28 所 元。 


“颜色 ”为 白色 ， 并 激活 仿 粗 体 图 标 ， 效 果 如 
双击 文字 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 , 设置 “距离 
为 1 像素 、“ 大 小 ” 


结构 


为 1 像素 ， 单 击 “ 确 定 ” 按 钮 ， 效 果 如 图 16-29 所 示 。 


混合 模式 (5): 正片 县 底 [a 
不 道明 度 (0): 一 一 一 因 |% i 建 样 寺 
角度 AW: ( 一 ) 30 。 度 问 使 用 全 局 光 人 


可 和 览 (V) 


复位 为 默认 值 


图 16-26 设置 “投影 ”参数 


图 16-27 


应 用 “投影 ”图 层 样 式 
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16-28 输入 文字 (4) 图 16-29 添加 “投影 ”图 层 样式 


16.2， 小 程序 设计 : 婚纱 摄影 小 程序 界面 设计 


在 制作 婚纱 摄影 小 程序 界面 时 ， 运 用 两 张 婚 纱 主题 照片 来 设计 程序 界面 ， 让 人 一 眼 明 白 
页 面 的 经 营 内 容 ， 色 彩 主要 使 用 各 种 浅 色 来 搭配 ， 和 营造 出 浪漫 唯美 的 氛围 。 
本 实例 最 终 效果 如 图 16-30 所 示 。 


图 16-30 ”实例 效果 


16.2.1 制作 婚纱 摄影 小 程序 首页 广告 效果 电 


下 面 详细 介绍 制作 婚纱 摄影 小 程序 首页 广告 效果 的 方法 。 
p 束 汝 01| 按 Ctrl + O 组 合 键 ,打开 “婚纱 摄影 小 程序 背景 .jpg” 素材 图 像 , 如 图 16-31 所 示 。 
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g 台 当 02 按 Ctrl + OO 组合 键 ， 打开 “婚纱 人 物 jpg” 素 材 图 像 ， 如 图 16-32 所 示 。 


图 16-31 打开 育 景 素材 图 像 图 16-32 打开 婚纱 素材 图 像 


选择 “图 像 | 调整 | 曲线” 命令， 弹出 “曲线 ”对 话 框 ， 在 曲线 上 单 击 
鼠标 左 键 新 建 一 个 控制 点 ， 在 下 方 设 置 “ 输 入 ” 值 为 136、“ 输 出 ” 值 为 180， 如 图 16-33 所 
示 ， 单 击 “ 确 定 ” 按 钮 。 

选择 “图像 | 调整 | 自然 饱和 度 ” 命令 , 弹出 “自然 饱和 度 ” 对 话 框 , 设置 “ 自 
然 饱 和 度 ” 为 71， 单 击 “ 确 定 ” 按 钮 ， 效 采 如 图 16-34 所 示 。 


2 一 - » .6. 
图 16-34 ”调整 饱和 度 效果 


2 过 河 05| 运用 移动 工具 将 素材 图 像 拖 电 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 
位 置 ， 效 果 如 图 16-35 所 示 。 

选取 工具 箱 中 的 横 排 文字 工具 , 设置 “字体 系列 ”为 “方正 大 标 宋 简体 ”、“ 字 
体 大 小 ”为 “50 点 ”、“ 颜 色 ” 为 深 灰 色 (RGB 参数 值 均 为 27)， 并 激活 仿 粗 体 图 标 国 ， 在 
图 像 编 辑 窗 口中 输入 文字 ， 如 图 16-36 所 示 。 
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图 16-35 拖 忠 图 像 16-36 输入 文字 


选取 工具 箱 中 的 矩形 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 
“填充 ”为 无 、“ 摘 边 ” 为 灰色 (RGB 参数 值 均 为 131)、“ 描 边 宽度 ”为 2 像素 ， 在 图 像 编 
辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 如 图 16-37 所 示 。 

按 Ctrl + 0 组 合 键 ， 打开“ 婚纱 文字 1.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 
图 像 拖 虹 至 背景 图 像 编 辑 窗 口中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 16-38 所 示 。 
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16-37 ”经 制 和 矩形 16-38 添加 文字 素材 
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专家 指点 》) 


在 设计 小 程序 UI 时， 需要 对 界面 中 的 各 个 元 素 进 行 恰当 的 摆 放 ， 使 画面 看 上 去 更 有 
冲击 力 和 美感 ， 这 就 是 构图 。 构 图 起 初 是 绘画 中 的 专 有 术语 ， 后 来 广泛 应 用 于 摄影 和 平 
面 设计 等 视觉 艺术 领域 。 

一 个 成 功 的 小 程序 UI 作品， 大 多 是 拥有 严谨 的 构图 ， 能 够 使 作品 重点 突出 ， 有 条 有 
理 ， 富 有 美感 ， 货 心 悦 目 ， 而 且 适 当 的 构图 形式 还 能 够 提高 设计 效率 。 


16.2.2 制作 婚纱 摄影 小 程序 服务 中 心 效果 JU 


late pliinnaliogi hveat gohanaalet he 

01| 新 建 图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 选 
区 .， re 7 39 所 示 。 

为 选区 填充 灰色 (RGB 参数 值 均 为 239)， 并 取消 选区 ， 如 图 16-40 所 示 。 


绘制 


16-39 ”经 制 窍 形 选 区 图 16-40 ”填充 选区 


按 Ctrl + O 组 合 键 ， 打 开 “ 客 服 中 心 背景 图 jpg” 素 材 图 像 ， 运 用 移动 工具 将 
素材 图 像 拖 电 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 和 大 小 ， 效 果 如 图 16-41 所 示 。 

按 住 Ctrl 键 的 同时 ， 单 击 “ 图 层 3” 图 层 的 图 层 缩 览 图 ， 载 入 选区 ， 新 建 一 个 
图 层 并 填充 黑色 (RGB 参数 值 均 为 0)， 设 置 图 层 的 “不 透明 度 ” 为 30%， 取 消 选区 ， 效 果 如 
图 16-42 ie 

05| 选取 工具 箱 中 的 圆 角 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 浅黄 色 (RGB 
了 255、251、203)、“ 描 边 ” 为 无 、“ 半 径 ” 为 10 像素 ， 在 图 像 编 辑 窗口 中 绘 
制 一 个 圆 角 矩形， 并 设置 其 “不 透明 度 ” 为 65%， 如 图 16-43 所 示 。 
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.06 选取 工具 箱 中 的 横 排 文 字 工 具 , 设置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 
体 大 小 ” ee 点 、“ 颜 色 ” 为 黑色 (RGB 参数 值 均 为 0)， 并 激活 仿 粗 体 图 标 国 ， 在 图 像 
辑 窗 口中 输入 文字 ， 如 图 16-44 所 示 。 


浴 讨 


© 946A B35% 10:32 


图 16-41 拖 入 背景 素材 


图 16-43 经 制 圆 角 甜 形 图 16-44 输入 文字 


到 河 07| 选择 圆 角 矩形 图 像 和 文字 图 层 ， 复 制 相应 图 层 ， 并 将 其 移动 至 合适 位 置 ， 如 图 
16-45 所 示 。 

08| 选取 工具 箱 中 的 圆 角 矩形 工具 ， 设 置 “ 填 充 ” 为 蓝 色 (RGB 参数 值 分 别 为 
207、 245. i 效果 如 图 16-46 所 示 。 
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把 小 程序 界面 的 配色 设计 好 ， 让 界面 更 好 看 一 点 ， 更 漂亮 一 点 ， 这 样 就 会 在 视觉 上 
吸引 用 户 ， 给 小 程序 带 来 更 多 的 流量 。 小 程序 的 配色 首先 要 精简 ， 然 后 尽 可 能 地 反映 品 
牌 特 性 。 对 于 进入 小 程序 的 用 户 来 说 ， 他 们 首先 会 被 界面 中 的 图 片 色 彩 所 吸引 ， 然 后 根 
据 色 彩 的 走向 对 画面 的 主 次 进行 逐一 的 了 解 。 另 外 ,为 了 让 用 户 快速 获知 页 面 中 的 信息 ， 
在 设计 小 程序 界面 时 可 以 使 用 空间 和 组 块 有 意识 地 突出 重点 内 容 ， 让 界面 看 上 去 更 加 干 
净 整 洁 。 


图 16-45 复制 并 移动 图 层 图 16-46 ” 苦 整 填充 色 


2 型 河 09| 选取 工具 箱 中 的 横 排 文字 工具 ， 修 改 文本 内 容 ， 效 果 如 图 16-47 所 示 。 
2 到 党 10| 按 Ctrl + O 〇 组 合 键 打开 “婚纱 文字 2.psd” 和 素材 图 像 ， 运 用 移动 工具 将 素材 
图 像 拖 中 至 背景 图 像 编 辑 窗口 中 ， 适 当 调 整 图像 的 位 置 ， 效 果 如 图 16-48 所 示 。 


图 16-48 拖 忠 图 像 


4G: 豆 闪 与 小 程序 UI 设计 


16.2.3 制作 婚纱 摄影 小 程序 彩色 导航 栏 JU 


下 面 详细 介绍 制作 小 程序 彩色 导航 栏 的 方法 。 

选取 工具 箱 中 的 直线 工具 ,在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ” 、“ 粗 
细 ” 为 2 像素 、“ 填 充 ” 为 灰色 (RGB 参数 值 均 为 195), 在 图 像 编辑 窗口 中 绘制 一 个 直线 形状 ， 
如 图 16-49 所 示 。 

按 CtrltO 组 合 键 ， 打 开 “ 导 航 栏 图 标 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 
图 像 拖 电 至 背景 图 像 编 辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 16-50 所 示 。 


图 16-49 绘制 直线 图 16-50” 拖 忠 图 像 


一 河 03| 单 击 前 景色 色 块 ， 弹 出 “ 拾 色 器 (前 景色 )” 对 话 框 ， 设 置 RGB 参数 值 分 别 为 
213、191、141， 如 图 16-51 所 示 ， 单 击 “ 确 定 ” 按 钮 。 

2 天河 04| 选取 工具 箱 中 的 魔 棒 工 具 ， 在 图 像 编 辑 窗口 中 适当 位 置 单 击 鼠 标 左 键 ， 创 建 选 
区 ， 并 按 AlttDelete 组 合 键 为 选区 填充 前 景色 ， 如 图 16-52 所 示 ， 再 取消 选区 。 


图 16-51 ”设置 前 景色 


Photoshop 一 一 一 > 
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选取 工具 箱 中 的 横 排 文字 工具 , 设置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 
体 大 小 ”为 25 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -25、“ 颜 色 ” 为 深 灰 色 (RGB 参数 值 均 
为 34)， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 16-53 所 示 。 

选中 相应 文字 ， 并 修改 颜色 为 棕色 (RGB 参数 值 分 别 为 179、152、133)， 如 图 
16-54 所 示 ， 按 Ctrl+Enter 组 合 键 确 认输 入 。 
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图 16-53 输入 文字 图 16-54 ”修改 颜色 
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